Как сделать эффект нажатия кнопки на CSS

🗓️ Обновлено: 16.08.2022
💬Комментариев: 0
👁️Просмотров: 28331

Как сделать эффект нажатия кнопки на CSS

Здесь ты узнаешь, как сделать эффект вдавливания кнопки на CSS. Забегая наперед скажем, что ничего сложного тут нет, справиться сможет любой новичок.

Пример

Что у нас получится в итоге (кликни кнопку):



Что нам нужно знать? Вы должны знать, что такое псевдоэлемент (:before и :after) и что такое псевдоклассы (:hover, :active). Должны понимать, как добавить тень элементу, а также как можно двигать элемент с помощью свойства transform.

Пишем код

Итак, приступим.

Создадим в html нашу кнопку:

<button class="btn">Нажми на меня</button>

Теперь, перейдем к настройке CSS. Для начала перепишем свойства button, которые заданы по умолчанию:

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;
}

Теперь можно переходить к визуальному оформлению кнопки. Зададим цвет текст, фон, граница, отступы и другие мелочи.

button.btn {
  font-weight: 600;
  color: #382b22;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: #fff0f0;
  border: 2px solid #b18597;
  border-radius: 0.75em;
  transition: transform 0.15s;
  transform-style: preserve-3d;
}

Итак, у нас должна получиться вот такая кнопка:

Пока ничего особенного. Но давайте перейдем к псевдоэлементам. Добавим :before

button.btn::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f9c4d2;
  border-radius: inherit;
  box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
  transform: translate3d(0, 0.75em, -1em);
  transition: transform 0.15s, box-shadow 0.15s;
}

И вот у нас уже кнопка с 3D эффектом. Псевдоэлементу мы задали фон и тень, которая и позволила добиться этого эффекта. Еще мы опустили чуть ниже основного каркаса кнопки. Вот что у нас получилось:

Теперь давайте сделаем эффект вдавливания при наведении на кнопку. Она будет немного вдавливаться, не полностью.

Для этого мы опустим основной каркас ниже, изменив ему немного фон и чуть-чуть уменьшим тень (box-shadow) для псевдоэлемента:

button.btn:hover {
  background: #ffe9e9;
  transform: translate(0, 0.25em);
}
button.btn:hover::before {
  box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
  transform: translate3d(0, 0.5em, -1em);
}

Выходит вот такая кнопка (наведите на нее!):

Нажми на меня

И заключительный штрих, поменяем стили при состоянии :active

button.btn:active {
  background: #ffe9e9;
  transform: translate(0em, 0.75em);
}
button.btn:active::before {
  box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
  transform: translate3d(0, 0, -1em);
}

Когда кнопка активна (пользователь нажал на нее), мы немного двигаем основную часть кнопки и убираем тень.

Вот и все, эффект нажатия на кнопку готов!

Итоговый код

See the Pen Как сделать эффект нажатия кнопки на CSS by Pelegrin (@pelegrin2puk) on CodePen.

Видео

Статья была полезной?
👍
Да - 41
👎
Нет - 10
💬Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучшие биржи ссылок
4.8
2
4.0
3.8
4
GoGetLinks
3.5
5
Miralinks
3.5
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Peach Fuzz
🤔Цвет 2024 года
Исследовательский институт Pantone выбрал главный цвет 2024 года. Им стал нежный бархатистый персиковый оттенок, получивший название Peach Fuzz (Персиковый пух).
#febe98