Як зробити ефект натискання кнопки на 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.

Відео