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

Оцените работу нашей автомойки

Оцените работу нашей автомойки, узнайте оценку автомойки и пожелания клиентов Подробнее
Platinum

Пивной тест: Разбираешься ли ты в чешском пиве?

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

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

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

Мы используем файлы cookie, чтобы Вам было удобней пользоваться веб-сайтом. Используя эту страницу, вы соглашаетесь с нашей политикой в отношении файлов cookie.