Створіть вірусну кнопку за допомогою HTML та CSS - javascript.org.ua

Ця кнопка стане результатом цього блогу.

Привіт, розробники!

Я — Аджай, один із авторів на The Div Soup. Коли я вивчав HTML і CSS у 2021 році, під час одного з моїх численних експериментів я натрапив на дизайн кнопки.

Спочатку це був просто результат методу проб і помилок, але якось я створив один із найбільш популярних дизайнів кнопок за допомогою HTML та CSS.

Спершу я поділився ним у Twitter, але він не привернув особливої уваги. Однак, коли я завантажив його на CodePen, він став моїм найбільш переглянутим і вподобаним проектом на сьогодні! Перевірте статистику CodePen нижче.

Вірусний дизайн кнопки на CodePen

Цей досвід навчив мене важливому уроку: один із найкращих способів навчатися — це застосовувати те, що ви вивчаєте. Створюйте проекти на основі нових концепцій, які ви відкриваєте, і публікуйте свою роботу на таких платформах, як Twitter, CodePen або GitHub. Ви ніколи не знаєте, хто може це оцінити!

Саме тому The Div Soup має важливе значення — це єдине місце, де ви вивчаєте технології, створюючи проекти! The Div Soup пропонує вам близько 100 унікальних проектів з HTML і CSS.

У сьогоднішньому блозі ми відтворимо цей вірусний дизайн кнопки крок за кроком. Якщо ви завершили попередній проект з The Div Soup, цей буде для вас дуже легким!

Якщо ви ще не зробили цього, я раджу вам спочатку створити попередній проект. Повірте, вам сподобається працювати над ним, і це значно полегшить виконання цього проекту.

Пререквізити

Перед початком цього проекту варто ознайомитись із кількома ключовими концепціями:

Псевдоелементи ::before та ::after.
Відносне і абсолютне позиціювання в CSS.

Якщо ви не впевнені в цих темах, не хвилюйтеся! Ви можете звернутися до цих детальних посібників від The Div Soup:

Візьміть кілька хвилин, щоб ознайомитись із цими ресурсами, якщо потрібно, адже вони допоможуть вам краще зрозуміти техніки, які ми використовуватимемо в цьому проекті.

Готові? Чудово, продовжуємо.

Створення структури кнопки

Насамперед потрібно створити структуру проекту за допомогою HTML. Ось проста структура нашого необхідного дизайну:

The Div Soup

Додавання базових стилів до кнопки

У попередньому блозі ми вивчали кілька основних концепцій, зокрема використання властивості overflow у CSS.
Будуючи на основі цих концепцій, ось як ми можемо визначити базові стилі для цієї кнопки:

*,  
*::before,  
*::after {  
 margin: 0;  
 padding: 0;  
 box-sizing: border-box;  
}  

html {  
 font-size: 62.5%;  
}  

body {  
 font-family: "Roboto", sans-serif;  
 display: flex;  
 justify-content: center;  
 align-items: center;  
 height: 100vh;  
 background-color: #333;  
}  

.container > button {  
 font-size: 4rem;  
 padding: 2rem 4rem;  
 border: 4px solid #fff;  
 background-color: transparent;  
 color: #fff;  
 cursor: pointer;  
 text-transform: uppercase;  
 position: relative;  
 overflow: hidden;  
}

Ось як кнопка виглядає на цьому етапі:

Базовий дизайн кнопки, створений за допомогою HTML та CSS.

Подібно до попереднього проекту, нам потрібно поділити цю кнопку на чотири окремі частини, використовуючи псевдоелементи ::before та ::after. Давайте почнемо будувати.

Підхід до дизайну кнопки

Перед тим, як почати цей проект, ми настійно рекомендуємо спершу виконати попередній проект. У тому блозі ми детально пояснили більшість концепцій і технік, необхідних для створення цієї кнопки.

Повторення цих пояснень тут не лише забере ваш час, але й зменшить ефективність навчання. Однак, ось швидкий огляд підходу:

Основна ідея полягає в тому, щоб поділити кнопку на чотири частини, кожна з яких займає 25% від загальної ширини кнопки. Оскільки ширина кнопки вважається 100%, кожну з цих частин ми обчислюємо як частку цієї ширини.

Ці частини стилізуються та позиціонуються за допомогою псевдоелементів та технік позиціювання в CSS. Ось візуальне представлення цієї ідеї:

Логіка, яка стоїть за необхідною кнопкою.

Щоб реалізувати це, ми створимо чотири частини за допомогою псевдоелементів ::before та ::after і розмістимо їх на певних сторонах кнопки (вгорі, внизу, зліва та справа) за допомогою комбінації відносного (relative) та абсолютного (absolute) позиціювання.

Ось код для створення чотирьох частин та правильного їх позиціонування:

.container > button::after {  
 content: "";  
 position: absolute;  
 top: 0;  
 right: 100%;  
 height: 100%;  
 width: 25%;  
 background: #e93d3c;  
 z-index: -1;  
 transition: all 0.5s;  
}  

.container > button::before {  
 content: "";  
 position: absolute;  
 top: -100%;  
 left: 25%;  
 height: 100%;  
 width: 25%;  
 background: #e93d3c;  
 z-index: -1;  
 transition: all 0.5s;  
}  

.container > button > span::before {  
 content: "";  
 position: absolute;  
 bottom: -100%;  
 left: 50%;  
 height: 100%;  
 width: 25%;  
 background: #e93d3c;  
 z-index: -1;  
 transition: all 0.5s;  
}  

.container > button > span::after {  
 content: "";  
 position: absolute;  
 top: 0;  
 left: 100%;  
 height: 100%;  
 width: 25%;  
 background: #e93d3c;  
 z-index: -1;  
 transition: all 0.5s;  
}

У наведеному вище коді такі властивості є основними для досягнення бажаного дизайну:

z-index: Забезпечує правильне шарування псевдоелементів за кнопкою.
top, left, bottom, right: Використовуються для точного позиціонування кожної частини.
transition: Додає плавну анімацію до частин під час наведення (hover) або взаємодії.

Ось як це виглядає візуально на цей момент:

Усі чотири частини були розміщені в певних місцях.

Оскільки ми вже працювали над попереднім проектом, цей буде набагато простіше реалізувати. Давайте перейдемо до наступного етапу!

Збираємо всі частини разом при наведенні (hover)

Тепер давайте працювати над ефектом при наведенні (hover).
Коли кнопка знаходиться в стані наведення (hover), ми змінюємо місцями всі частини, щоб створити анімований перехідний ефект:

перша частина переміщується на місце четвертої частини.
четверта частина переміщується на місце першої частини.
Аналогічно, друга частина переміщується на місце третій частини.
третя частина переміщується на місце другої частини.

Це перестановка створює динамічну і візуально привабливу анімацію. Подивіться на ілюстрацію нижче, щоб краще зрозуміти концепцію:

Ілюстрація концепції при наведенні на кнопку.

Нижче наведено CSS код, який реалізує ефект при наведенні для кнопки. Він динамічно перестановлює чотири частини, коли користувач наводить курсор на кнопку:

.container > button:hover:after {  
 right: 0;  
}  

.container > button:hover span:after {  
 left: 0;  
}  

.container > button:hover:before {  
 left: 50%;  
 top: 0;  
}  

.container > button:hover span:before {  
 bottom: 0;  
 left: 25%;  
}

Ось як це виглядає після застосування всієї логіки; необхідний дизайн завершено.

Нарешті, ми завершили створення дизайну кнопки за допомогою HTML та CSS.

Не соромтеся досліджувати і експериментувати з цим захоплюючим дизайном кнопки у середовищі CodePen за посиланням нижче!

Посилання на проект у Codepen.

Перш ніж закінчити...

Сподіваємось, що вам сподобався цей блог! Ми намагались пояснити концепції простими словами, щоб зробити їх доступними для кожного.

Ми будемо вдячні, якщо ви поділитеся цим блогом у своїх соціальних мережах. Якщо ви відчуваєте натхнення, будь ласка, дайте нам відгук на LinkedIn та Twitter/X.

Цей проект був створений The Div Soup — вашим ідеальним місцем для освоєння веб-розробки через реальні проекти.

Цей блог написав Ajay Yadav, один із наших пристрасних авторів, який любить ділитися знаннями з веб-розробки через практичні та змістовні матеріали.

Слідкуйте за новими блогами та уроками від нього на цій платформі!

Перекладено з: Build a Viral Button Using HTML and CSS