Трясущаяся кнопка (shake effect)

Этот эффект привлекает внимание пользователя к важному элементу — например, к кнопке «отправить», когда форма заполнена с ошибкой, или к CTA, на который давно не кликали. Анимация создает ощущение «вибрации» или «дрожания», обычно влево-вправо или вверх-вниз.

Это статья из цикла заметок по CSS анимации и эффектам.

Как работает

Используем @keyframes для описания покадрового движения, и применим анимацию через свойство animation. В примере ниже кнопка будет слегка трястись влево и вправо.

Демка

Код на чистом CSS / HTML

Стили:

Улучшения и вариации

Чтобы анимация срабатывала по событию, например при нажатии или ошибке, можно добавить/удалить класс через JavaScript:

Смысл манипуляции в том, чтобы затриггерить анимацию.

Можно настроить амплитуду (насколько сильно «трясти») и продолжительность. А можно сделать анимацию бесконечной, если нужно постоянное привлечение внимания:

Где уместно применять:

  • Валидация форм (если данные введены неверно)
  • Призыв к действию (CTA)
  • Игровые интерфейсы
  • Анимация для пустых или заблокированных кнопок (добавить «ошибочное» дрожание)

Мало букафф? Читайте есчо !

Плавное появление элемента при загрузке

Апрель 21, 2025 г.

Здесь мы разберем CSS анимацию - плавное проявление элемента. Это статья из цикла заметок по CSS анимации и эффектам. Это одна из самых простых и универсальных анимаций. Она используется, чтобы элементы мягко появлялись на экране, создавая ...

Читать

Изменение цвета кнопки при наведении

Апрель 21, 2025 г.

Здесь мы разберем CSS анимацию - изменение цвета при наведении (:hover). Это статья из цикла заметок по CSS анимации и эффектам. Одним из самых простых и эффективных способов оживить интерфейс — сделать так, чтобы кнопка меняла цвет, когда ...

Читать

Реализация контроллера для списка autocomplete формы

Май 11, 2023 г.

См. основной материал для введения. Контроллер должен вернуть Json набор пар значений value - label. Ранее в модуле мы уже объявили связь для маршрутизации с нашим контроллером в файле custom_blocks.routing.yml. Теперь реализуем код. /src/Controller/ProductSearchAutoCompleteController.php ...

Читать

Мигание курсора или другого элемента с помощью CSS

Апрель 29, 2025 г.

Мигание — простой и при этом заметный визуальный эффект. Чаще всего используется для имитации текстового курсора или привлечения внимания к какому-то элементу (например, "новинка", "онлайн", и т.д.). Это статья из цикла заметок по CSS анимации и эффектам. ...

Читать
 

Комментарии к «Трясущаяся кнопка (shake effect)»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: