Анимация нажатия: эффект нажатой кнопки

Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка «прижать» её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY).

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

Пример, того как это выглядит (нажмите кнопку):

Пример кнопки

Вот пример на чистом CSS / HTML

Стили

Как это работает

  • transition задаёт плавное изменение при активации.
  • Псевдокласс :active срабатывает в момент нажатия (клика).
  • transform: scale(0.97) слегка уменьшает кнопку.
  • translateY(2px) опускает её вниз на 2 пикселя, создавая ощущение «вдавливания».

Почему это важно

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

Вариации

  • Можно добавить box-shadow, чтобы кнопка была изначально с тенью, а потом тень исчезала при нажатии.
  • Для более сильного эффекта можно использовать звук (если это уместно) или вибрацию на мобильных устройствах через JavaScript.

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

Анимация: Изменение цвета текста при наведении

Май 2, 2025 г.

Когда пользователь наводит курсор на текст (например, ссылку, заголовок или кнопку), его цвет плавно меняется. Это один из самых простых, но эффективных способов добавить интерактивности и визуальной обратной связи на сайт. Это статья из цикла заметок ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

Эффект увеличения элемента при наведении

Апрель 22, 2025 г.

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

Читать

Анимация свечения (мерцание)

Апрель 18, 2025 г.

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

Читать
 

Комментарии к «Анимация нажатия: эффект нажатой кнопки»

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



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