Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики
Разработка сайтов под ключ. Работаем с такими системами, как Worpress, 1C-Bitrix, Tilda. Закажите разработку в Lion Digital и получите по настоящему продающий сайт.
от 32900 
Настройка и сопровождение рекламного кабинета во Вконтакте.
от 14000 
Настройка и сопровождение рекламного кабинета Яндекс Директ.
от 14000 

Как сделать анимацию нажатия кнопки в 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

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.