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

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

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

Как работает

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

Демка

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

Стили:

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

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

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

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

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

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

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

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

Май 1, 2023 г.

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

Читать

Эффект бегущей строки на CSS

Апрель 24, 2025 г.

Бегущая строка — это классический визуальный элемент, в котором текст непрерывно движется по экрану. В старом HTML для этого использовался тег <marquee>, но он устарел. Вместо него сейчас можно сделать более гибкую и красивую реализацию на CSS. ...

Читать

 

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

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



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