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

Какой уход необходим для вашей кожи лица?

Квиз для выбора правильных средств по уходу за кожей лица для посетителей интернет-магазинов косметики и парфюмерии, салонов красоты, тематических блогов и соцстраниц.
$5.00
Подробнее
Basic

Анкета кандидата на работу

Принимайте анкеты кандидатов, задавая самые необходимые вопросы еще до собеседования Подробнее
Platinum

Настройте свой стиль платья

Конфигуратор платья с визуальным отображением изменений декольте, типа рукавов, длины платья Подробнее
Gold

Узнайте стоимость абонемента в фитнес-клуб

Пройдите тест и получите 3 занятия бесплатно Подробнее

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

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