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

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

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

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

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

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

Стили

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

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

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

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

Вариации

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

Написать комментарий

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

CSS-анимация загрузки: простой спиннер без JavaScript

Май 2, 2025 г.

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

Читать

Анимация: Поднятие элемента с тенью при наведении

Апрель 26, 2025 г.

Эта анимация создаёт эффект, будто элемент "приподнимается" над страницей, становясь более заметным. Обычно для этого используется свойство box-shadow, иногда в сочетании с лёгким смещением (transform: translateY(-2px)). Это статья из цикла заметок ...

Читать

 

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

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



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