Як зробити ефект натискання кнопки на CSS

🗓️ Оновлено: 16.08.2022
💬Коментарів: 0
👁️Переглядів: 6207

Тут ти дізнаєшся, як зробити ефект втискання кнопки на 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.

Відео

Стаття була корисною?
👍
Так - 14
👎
Ні - 4
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 18275
Поява елементів при скролі
Переглядів: 16835
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 6944
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 6785
Як зробити ефект натискання кнопки на CSS
Переглядів: 6207
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab