Как сделать эффект нажатия кнопки на 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.

Видео