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

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

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

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

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

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

Стили

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

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

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

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

Вариации

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

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

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

Плавающее движение вверх-вниз с помощью CSS

Май 1, 2025 г.

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

Читать

Изменение цвета кнопки при наведении

Апрель 21, 2025 г.

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

Читать

 

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

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



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