Веб-розробники часто стикаються з необхідністю створити прозору кнопку, щоб вона краще вписувалася в дизайн та не відволікала відвідувачів від контенту сторінки. CSS дозволяє нам легко досягти цього ефекту за допомогою простих стилів.
Використання властивості background-color замість значення кольору дозволяє задати кнопці прозорість. Для цього можна використовувати колір у форматі RGBA (Red, Green, Blue, Alpha), де значення альфа визначає ступінь прозорості. Значення альфа може бути в діапазоні від 0 (повністю прозорий) до 1 (повністю непрозорий).
Для створення прозорої кнопки за допомогою CSS нам потрібно задати колір фону кнопки з бажаним значенням альфа. Наприклад, щоб створити кнопку з напівпрозорим тлом, ми можемо використовувати значення альфа менше одиниці, наприклад, 0.5.
| № | Назва статті | Джерело |
|---|---|---|
| 1 | Прозорість кнопки за допомогою CSS | https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Background_and_Borders/Прозорість_кнопки |
| 2 | Як зробити кнопку прозорою в CSS | https://coderoad.ru/1668347/Як-зробити-кнопку-прозорою-в-CSS |
| 3 | Прозорість кнопки – вчимося задавати фоновий колір із прозорістю | https://webref.ru/dev/background |
У CSS для визначення напівпрозорого кольору є спеціальний формат RGBA. Цей формат задає колір у вигляді значень трьох компонентів – червоної, зеленої та синьої, кожна з компонентів змінюється від 0 до 255. Четвертим параметром йде ступінь прозорості цього кольору, задається від 0 до 1.
Для зміни кольору фону та тексту кнопки використовуємо відповідно властивості background і color, додаючи їх до селектора buttonЯк показано в прикладі 1. Основні параметри кнопки застосовуємо до селектора button, а додатково вводимо різні класи, щоб легко змінювати колір кнопок.
Для керування прозорістю фону в CSS є два інструменти – opacity та rgba. Основна відмінність цих інструментів у тому, що rgba можна застосувати точково, до конкретного елемента, opacity впливає і на дочірні теги в тому числі.