Как сделать анимацию нажатия кнопки в css

Чтобы создать анимацию нажатия кнопки в CSS, нужно использовать псевдокласс :active, который применим к кнопке в момент, когда кнопка нажата.

Ниже приведен пример CSS-кода, который создает анимацию нажатия кнопки:

.btn {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  transition-duration: 0.4s;
}

.btn:active {
  transform: translateY(4px);
}

В данном примере кнопка имеет класс .btn. Кнопка имеет обычные стили оформления, а также свойство transition-duration с указанным значением времени, которое определяет длительность анимации.

При нажатии на кнопку, применяется псевдокласс :active, который применяет трансформацию при нажатии на кнопку вниз (4 пикселя) с помощью свойства transform и функции трансформации translateY.

Это даст визуальный эффект, что кнопка нажимается, когда пользователь щелкает на нее.

Пример анимации нажатия кнопки вы можете увидеть здесь: https://codepen.io/serg-p/pen/zYzPREZ