Пробегающий анимированный блик на кнопке в форме Elementor

Пробегающий анимированный блик на кнопке Elementor в форме

Описание плагина

Плагин Button Animation Plugin for Elementor добавляет эффект анимации для кнопки с заданным ID и изменяет положение поля «Принятие» под кнопкой отправки формы в Elementor. Это полезно для создания более интерактивного и удобного пользовательского интерфейса.

Основные функции:

• Анимация кнопок: Позволяет добавить анимацию как к обычным кнопкам, так и кнопкам в формах Elementor, чтобы повысить визуальную привлекательность и интерактивность.
• Перемещение поля «Принятие»: Автоматически размещает поле «Принятие условий» под кнопкой отправки формы, что делает оформление форм более последовательным и удобным.

Установка

1. Скачайте и установите плагин через панель администратора WordPress.
2. Активируйте его на странице «Плагины».
3. Настройте анимацию через раздел «Анимация кнопки» в админ-панели.

Частые вопросы:

Текст согласия

Я даю <a href=»/privacy-policy» target=»_blank»>согласие</a> на обработку персональных данных

Селектор CSS

/* Устанавливаем для контейнера формы flex направление для правильного отображения */
selector .elementor-form-fields-wrapper {
display: flex;
flex-wrap: wrap;
}
/* Выравниваем поле Phone и кнопку Send в одну линию */
selector .elementor-field-type-phone,
selector .elementor-field-type-submit {
flex: 1; margin-right: 10px; /* Отступ между полем и кнопкой */
}
/* Убираем отступ справа для кнопки Send */
selector .elementor-field-type-submit {
margin-right: 0;
}
/* Поле Acceptance перемещаем под остальные элементы */
selector .elementor-field-type-acceptance {
order: 2;
width: 100%;
margin-top: 1px; /* Отступ сверху */
}
/* Настройка для мобильных устройств */
@media (max-width: 767px) {
/* Вернуть стандартное отображение для мобильных устройств */
selector .elementor-form-fields-wrapper {
flex-direction: column;
}
selector .elementor-field-type-phone,
selector .elementor-field-type-submit {
margin-right: 0;
}
}
selector .elementor-field-type-submit {
margin-right: 0;
}
}