Кейс: как добавить CSS анимацию для кнопок

Добрый день!

В этом посте хотим вам рассказать, как можно легко добавить CSS анимацию в вашу форму для кнопок, без технических специалистов. Для этого вам необходимо воспользоваться сервисом CSSFX - Beautifully simple click-to-copy CSS effects. Откройте ссылку сервиса, выберите один из предложенных вариантов анимации:

Как добавить CSS анимацию для кнопок 1

Нажмите на необходимую кнопку и перед вами откроется всплывающее окно с HTML и CSS кодом. Скопируйте код, нажав кнопку "COPY", напротив СSS:

Как добавить CSS анимацию для кнопок 2

Далее зайдите в личный кабинет, выберите необходимую форму, где хотите добавить анимацию для кнопки, откройте вкладку "Тема оформления":

Как добавить CSS анимацию для кнопок 3

Откройте раздел "CSS" в теме оформления:

Как добавить CSS анимацию для кнопок 4

Если у вас стандартная тема, вам необходимо сначала скопировать тему. В поле "Пользовательский CSS", вам нужно вставить ранее скопированный код:

Как добавить CSS анимацию для кнопок 5

После того, как вставили код в "Пользовательский CSS", в блоке "button::before" в строке "background-color:", прописано значение цвета, как в примере:

Как добавить CSS анимацию для кнопок 6

Вы можете задать любой цвет, который вам больше подходит по дизайну сайта. Для определения цвета, вы можете использовать сторонние сервисы или в нашем конструкторе в теме оформления, в любой настройке цвета, либо фона, либо шрифта, скопировать код выбранного цвета:

Как добавить CSS анимацию для кнопок 7

Выбрав необходимый цвет, вставляем его в строку после "background-color:" после знака диез "#":

Как добавить CSS анимацию для кнопок 8

После того, как изменили код цвета анимации, можно сменить цвет шрифта при наведении на кнопку, уже в теме оформления формы, т.к. по умолчанию он у нас чёрный и не отчётливо смотрится на синем фоне. Меняем его на белый цвет, который лучше смотрится на синем фоне:

Как добавить CSS анимацию для кнопок 9

В режиме просмотра формы можете посмотреть полученную CSS анимацию для кнопок, которая также будет действовать для кнопок "Отправить", "Назад":

Как добавить CSS анимацию для кнопок 10

Комментарии
Готовые шаблоны веб-форм
Platinum

Калькулятор пластиковых окон

C помощью калькулятора пластиковых окон пользователь может рассчитать стоимость выбранного профиля, стеклопакета и дополнительных опций Подробнее
Platinum

Какое обручальное кольцо тебе подойдет?

Тест-заказ может быть размещен на сайтах, пабликах, в почтовых рассылках ювелирных магазинов.
$6.00
Подробнее
Platinum

Закажите продуктовый набор

Закажите продуктовый набор c помощью этого шаблона Подробнее
Platinum

Сюжет твоей карьеры

Шаблон тестирования в игральной форме поможет выяснить Вашим пользователям,в каком виде развивается его карьера: драма, комедия или боевик Подробнее

Закажите разработку формы под ключ

Нет времени разбираться со всеми настройками самому? Не проблема!
Закажите разработку веб-формы у нас