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

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

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

Как работает

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

Демка

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

Стили:

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

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

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

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

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

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

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

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

Апрель 21, 2025 г.

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

Читать

Анимация подчеркивания текста при наведении

Апрель 28, 2025 г.

Классический эффект: при наведении на ссылку или текст появляется анимированное подчеркивание. Вместо обычного text-decoration: underline, подчеркивание создаётся с помощью псевдоэлементов (::after или ::before) и плавно анимируется. Это выглядит современно ...

Читать

Эссе «добро вокруг меня» GTPChat v4 исходный сокращенный вариант

Май 1, 2023 г.

Другие версии здесь. Доброта вокруг меня - это то, что вселяет надежду и веру в лучшее будущее. Я вижу ее в действиях людей, которые помогают друг другу в трудные моменты, в тех, кто творит добро и радость вокруг себя. Когда я читаю новости о гуманитарных ...

Читать

Эссе «добро вокруг меня» GTPChat от лица старца 100 лет

Май 1, 2023 г.

Другие версии здесь. Много лет прошло, и я по-прежнему замечаю доброту вокруг меня. Когда я смотрю на своих потомков и вижу, как они становятся заботливыми и любящими людьми, это для меня настоящее счастье. Я также видел, как люди помогают друг ...

Читать
 

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

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



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