Когда пользователь нажимает кнопку, полезно дать тактильную обратную связь — например, слегка «прижать» её визуально. Такой эффект достигается с помощью изменения масштаба (scale) и вертикального смещения (translateY).
Это статья из цикла заметок по CSS анимации и эффектам.
Пример, того как это выглядит (нажмите кнопку):
Вот пример на чистом CSS / HTML
|
1 |
<span class="button">Пример кнопки</span> |
Стили
|
1 2 3 4 5 6 7 8 9 10 |
.button { background-color: #4CAF50; color: white; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: transform 0.1s ease; } |
|
1 2 3 |
.button:active { transform: scale(0.97) translateY(2px); } |
Как это работает
transitionзадаёт плавное изменение при активации.- Псевдокласс
:activeсрабатывает в момент нажатия (клика). transform: scale(0.97)слегка уменьшает кнопку.translateY(2px)опускает её вниз на 2 пикселя, создавая ощущение «вдавливания».
Почему это важно
- Это микровзаимодействие делает интерфейс более отзывчивым.
- Подчёркивает, что действие произошло.
- Привычно для пользователей мобильных приложений.
Вариации
- Можно добавить
box-shadow, чтобы кнопка была изначально с тенью, а потом тень исчезала при нажатии. - Для более сильного эффекта можно использовать звук (если это уместно) или вибрацию на мобильных устройствах через JavaScript.