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

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

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

Как работает

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

Демка

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

Стили:

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

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

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

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

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

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

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

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

Апрель 21, 2025 г.

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

Читать

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

Май 1, 2023 г.

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

Читать

CSS-анимация: Эффект пульсации

Май 1, 2025 г.

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

Читать

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

Апрель 29, 2025 г.

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

Читать
 

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

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



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