Кейс: как добавить 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

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

Шаблон оценки лояльности клиента

Узнайте об уровне удовлетворенности клиентов, чтобы определять тенденции лояльности потребителей в рамках Вашей маркетинговой деятельности. Подробнее
Gold

Доставка цветов

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

Сможешь ли ты стать популярным инстаграм-блогером?

Этот тест покажет, есть ли у тебя шансы получить 10 миллионов подписчиков!
$5.00
Подробнее
Gold

Куда отправиться в путешествие?

Для турфирм. Пройдите короткий тест, выберите страну для идеального отдыха и получите скидку 10% на любой тур из нашего каталога!
$6.00
Подробнее

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

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