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

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

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

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

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

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

Стили

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

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

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

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

Вариации

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

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

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

Май 1, 2025 г.

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

Читать

Плавное появление текста по буквам

Апрель 20, 2025 г.

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

Читать

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

Апрель 26, 2025 г.

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

Читать

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

Апрель 21, 2025 г.

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

Читать
 

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

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



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