Оригінальна публікація: CSS Button Style – Hover, Color, and Background
У цій публікації ми розглянемо стилізацію кнопок за допомогою CSS.
Моя головна задача — роз’яснити використання правил CSS. Ми не будемо розглядати ідеї для стилізування.
Це буде короткий огляд того, як працюють стилі, які властивості часто використовуються та як їх можна поєднувати.
Спершу ви дізнаєтесь, як створити кнопку в HTML. Потім ви вивчите, як позбутись стилізації кнопок за замовчуванням. Вкінці ви коротко дізнаєтесь, як стилізувати кнопки трьох різних станів.
Зміст
- Створення кнопки в HTML
- Зміна стилізації кнопок за замовчуванням
- Зміна кольору фону
- Зміна кольору тексту
- Зміна краю
- Зміна розміру
- Стани кнопки
- Стилізація стану hover
- Стилізація стану focus
- Стилізація стану active
- Висновок
Розпочнемо!
Як створити кнопку в HTML
Використайте елемент <button>, щоб створити кнопку.
Це доступніший варіант, порівняно із використанням загального контейнера, створеного за допомогою елемента <div>.
У поданому нижче файлі index.html я створила базову структуру для вебсайту та додала одну кнопку:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>CSS Button Style</title>
</head>
<body>
<button type="button" class="button">Click me!</button>
</body>
</html>
Розберемо рядок <button type="button" class="button">Click me!</button>:
- Спершу ви додаєте елемент-кнопку, що складається із початкового
<button>та кінцевого</button>тегів. - Атрибут
type="button"у початковому тегу<button>створює активну кнопку. Оскільки ця кнопка не створена для відправки форми, її корисно додати, щоб зробити код чистішим та вберегти від небажаних дій. - Атрибут
class="button"буде використано, щоб стилізувати кнопку в окремому файлі CSS. Значенняbuttonможе бути будь-яким іншим. Наприклад, можна було використатиclass="btn". - Текст
Click me!— це видимий текст всередині кнопки.
Усі застосовані до кнопки стилі будуть всередині файлу style.css.
Перед стилізацією вмісту HTML потрібно сполучити два файли. Це виконується за допомогою тегу <link rel="stylesheet" href="style.css">, який було використано в index.html.
У файлі style.css я лише додала стилізацію, яка відцентровує кнопку за центром вікна.
Зверніть увагу, що class="button" використовується із селектором .button. Це один зі способів застосувати стилізацію напряму до кнопки.
* {
box-sizing: border-box;
}
body {
display:flex;
justify-content: center;
align-items: center;
margin:50px auto;
}
.button {
position: absolute;
top:50%
}
Код зверху призведе до наступного результату:
Стилізація кнопки за замовчуванням залежить від вашого браузера.
Це приклад стилізації кнопок за замовчуванням у браузері Google Chrome.
▫️ Як змінити стилізацію кнопок за замовчуванням
Як змінити колір фону кнопок
Використовуємо властивість background-color та надаємо їй бажане значення, щоб змінити колір фону кнопки.
Використайте background-color:#0a0a23; у селекторі .button, щоб змінити колір фону кнопки.
.button {
position: absolute;
top:50%;
background-color:#0a0a23;
}
Як змінити колір тексту кнопок
Колір тексту за замовчуванням — чорний, тому якщо ви зробите темний фон, то зникне текст.
Важливо, щоб був контраст між кольорами фону та тексту. Це допоможе зробити текст читабельнішим та легшим для очей.
Використовуємо властивість color, щоб змінити колір тексту:
.button {
position: absolute;
top:50%;
background-color:#0a0a23;
color: #fff;
}
Як змінити край кнопок
Бачите сірий колір навколо кнопки? Це колір краю за замовчуванням.
Позбутися цього можна за допомогою властивості border-color. Потрібно встановити таке ж саме значення, що й значення background-color. Завдяки цьому край має такий ж самий колір, що й фон кнопки.
Також можна повністю видалити край, використовуючи border:none;.
.button {
position: absolute;
top:50%;
background-color:#0a0a23;
color: #fff;
border:none;
}
Край кнопки можна округлити, використовуючи властивість border-radius:
.button {
position: absolute;
top:50%;
background-color:#0a0a23;
color: #fff;
border:none;
border-radius:10px;
}
За допомогою властивості box-shadow можна додати легку тінь навколо кнопки:
position: absolute;
top:50%;
background-color:#0a0a23;
color: #fff;
border:none;
border-radius:10px;
box-shadow: 0px 0px 2px 2px rgb(0,0,0);
Як змінити розмір кнопок
Всередині кнопки можна створити більше місця, якщо збільшити padding.
Знизу я додала значення 15px до верхнього, нижнього, правого та лівого відступів.
Також я встановила мінімальні висоту та ширину, min-height та min-width відповідно. Кнопки повинні бути достатньо великими для різних пристроїв.
.button {
position: absolute;
top:50%;
background-color:#0a0a23;
color: #fff;
border:none;
border-radius:10px;
padding:15px;
min-height:30px;
min-width: 120px;
}
▫️ Як стилізувати стани кнопок
Кнопки мають три різні стани:
:hover:focus:active
Найкраще, коли вони стилізовані по-різному.
У наступних розділах я коротко опишу кожен стан. Ви також побачите декілька способів стилізації кнопки для кожного стану.
Як стилізувати стан hover
Стан :hover настає, коли користувач наводить мишкою на кнопку, але не натискає на неї.
Щоб кнопка змінювалась, коли на неї наводять мишкою, використовуйте псевдоклас :hover.
Найчастіше за допомогою :hover змінюють фон кнопки.
Щоб ця зміна не була різкою, використайте властивість transition разом із :hover.
Властивість transition допоможе зробити плавніший перехід до стану :hover.
Зміна фону відбудеться дещо швидше, в порівнянні без властивості transition. Крім того, це не буде різати око та дратувати користувача.
.button:hover {
background-color:#002ead;
transition: 0.7s;
}
У прикладі вище я використала значення, завдяки якому кнопка буде світлішою, якщо на неї навести мишкою.
За допомогою властивості transition я створила й час затримки 0.7s, за який відбувається перехід до стану :hover. Це призвело до повільнішого переходу від початкового фону #0a0a23 до #002ead.
Зауважте, що псевдоклас :hover не працює на мобільних пристроях та мобільних застосунках. Використовуйте цей ефект лише для несенсорних пристроїв.
Як стилізувати стан focus
Стан :focus впливає на користувачів клавіатури: він активується, якщо навести на кнопку за допомогою клавіші Tab (⇥).
Після натиснення клавіші Tab ви побачите наступне:
Бачите синій контур навколо кнопки під час фокусу?
Для псевдокласу :focus браузери мають стилізацію за замовчуванням (з огляду на навігацію за допомогою клавіатури). Тому краще не видаляти outline повністю.
Однак ви можете створити власну стилізацію, щоб кнопку було легко найти.
Спочатку встановіть контур на transparent.
Після цього ви можете залишити outline-style на solid. Вкінці, використовуючи властивість box-shadow, ви можете додати бажаний колір, коли елемент сфокусований:
.button:focus {
outline-color: transparent;
outline-style:solid;
box-shadow: 0 0 0 4px #5a01a7;
}
Ці стилі теж можна об’єднати із властивістю transition, залежно від бажаного результату:
.button:focus {
outline-color: transparent;
outline-style:solid;
box-shadow: 0 0 0 4px #5a01a7;
transition: 0.7s;
}
Як стилізувати стан active
Стан :active стає активним, якщо натиснути на кнопку.
Гляньте, що відбувається із кнопкою, якщо натиснути на неї після того, як я застосувала та зберегла стилі для станів :hover та :focus:
Стилі стану :hover застосовані тоді, коли я навожу мишкою.
Стилі стану :focus теж застосовані, тому що коли кнопку натискають, вона переходить в :focus разом із :active.
Однак майте на увазі, що це не одне й те саме.
Стан :focus — це коли елемент сфокусований, а при стані :active користувач натискає на елемент.
Щоб змінити стиль, коли користувач натискає на кнопку, застосуйте стилі до псевдоселектора :active.
У цьому прикладі я змінила колір фону кнопки, коли користувач натискає на неї:
.button:active {
background-color: #ffbf00;
}
Висновок
Що ж! Тепер ви знаєте основи стилізації кнопки за допомогою CSS.
Ми переглянули, як змінити колір фону та тексту кнопок, а також стилізацію при різних станах.
Щоб дізнатись більше про вебдизайн, перегляньте сертифікацію «Адаптивний вебдизайн». Завдяки інтерактивним урокам ви вивчите HTML та CSS, побудуючи 15 практичних та 5 сертифікаційних проєктів.
Дякую, що прочитали. Щасливого програмування!