W3.CSS Кнопки
W3.CSS Класи кнопки
W3.CSS надає наступні класи для кнопок:
| Клас | Визначає |
|---|---|
| w3-btn | Прямокутна кнопка с ефектом тіні при наведенні. Колір за замовчуванням чорний. |
| w3-button | Прямокутна кнопка із сірим ефектом наведення. Колір за замовчуванням світло-сірий в W3.CSS версії 3. Колір за замовчуванням наслідується від батьківського елемента в версії 4. |
| w3-bar | Горизонтальна смуга, яка може використовуватись для групування кнопок. (Ідеально підходить для горизонтальних меню навігації) |
| w3-block | Клас, який можна використовувати для визначення кнопки на всю ширину (100%). |
| w3-circle | Може використовуватись для визначення круглої кнопки. |
| w3-ripple | Може бути використано для створення ефекту ripple (хвилі). |
Кнопки
І клас w3-button, і клас w3-btn додають поведінку кнопки до будь-яких елементів HTML.
Найбільш розповсюджені елементи для використання <input type="button">, <button> та <a>:
Приклад
<input class="w3-button w3-black" type="button" value="Input Button">
<button class="w3-button w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-button w3-black">Link Button</a>
<input class="w3-btn w3-black" type="button" value="Input Button">
<button class="w3-btn w3-black">Button Button</button>
<a href="https://www.w3schools.com" class="w3-btn w3-black">Link Button</a>
Кольори кнопок
Всі класи w3-color використовуються для додавання кольору кнопкам:
Приклад
<button class="w3-button w3-black">Black</button>
<button class="w3-button w3-khaki">Khaki</button>
<button class="w3-button w3-yellow">Yellow</button>
<button class="w3-button w3-red">Red</button>
<button class="w3-button w3-purple">Purple</button>
Кольори при наведенні
Ефекти наведення також бувають різних кольорів. Ось деякі:
Класи w3-hover-color використовуються для додавання кольору при наведенні на кнопки:
Приклад
<button class="w3-button w3-hover-black">Black</button>
<button class="w3-button w3-hover-red">Red</button>
<button class="w3-button w3-hover-purple">Purple</button>
Форми кнопок
Класи w3-round-size використовуються для додавання округлених меж кнопкам:
Приклад
<button class="w3-button w3-round">Округла</button>
<button class="w3-button w3-round-large">Кругла</button>
<button class="w3-button w3-round-xlarge">Більш кругла</button>
<button class="w3-button w3-round-xxlarge">Ще більш кругла</button>
<button class="w3-btn w3-round">Округла</button>
<button class="w3-btn w3-round-large">Кругла</button>
<button class="w3-btn w3-round-xlarge">Більш кругла</button>
<button class="w3-btn w3-round-xxlarge">Ще більш кругла</button>
Спробуйте самі »
Розміри кнопок
Класи w3-size можуть бути використані для визначення різних розмірів тексту:
Приклад
<button class="w3-button w3-tiny">Tiny</button>
<button class="w3-button w3-small">Small</button>
<button class="w3-button w3-medium">Medium</button>
<button class="w3-button w3-large">Large</button>
<button class="w3-button w3-xlarge">xLarge</button>
<button class="w3-button w3-xxlarge">XXLarge</button>
<button class="w3-button w3-xxxlarge">XXXLarge</button>
<button class="w3-button w3-jumbo">Jumbo</button>
Межі кнопок
Клас w3-border можна використовувати для додавання меж кнопкам.
Класи w3-border-color використовуються для визначення кольору межі:
Приклад
<button class="w3-button w3-white w3-border">Кнопка</button>
<button class="w3-button w3-white w3-border w3-border-blue">Кнопка</button>
<button class="w3-button w3-yellow w3-border">Кнопка</button>
<button class="w3-button w3-white w3-border w3-border-red w3-round-large">Кнопка</button>
Порада: Додайте клас w3-round-розмір щоб додати округлі межі.
Кнопки з різними текстовими ефектами
Кнопки можуть використовувати ефект ширшого тексту:
Клас w3-wide додає ширший текстовий ефект:
Приклад
<button class="w3-button">Звичайна</button>
<button class="w3-button w3-wide">Широка</button>
Кнопки можуть мати курсивний і жирний текст:
Використовуйте стандартні HTML теги (<i> та <b>), щоб додати курсивний або жирний ефект до тексту кнопки:
Приклад
<button class="w3-button"><i>Курсивний</i></button>
<button class="w3-button"><b>Жирний</b></button>
Кнопки з відступом (padding)
Класи w3-padding-розмір використовуються для додавання додаткового відступу навколо тексту кнопки:
Приклад
<button class="w3-button w3-padding-small">Кнопка</button>
<button class="w3-button">Кнопка</button>
<button class="w3-button w3-padding-large">Кнопка</button>
<button class="w3-btn w3-padding-small">Кнопка</button>
<button class="w3-btn">Кнопка</button>
<button class="w3-btn w3-padding-large">Кнопка</button>
Кнопки на всю ширину
Щоб створити кнопку на всю ширину, додайте в неї клас w3-block.
Кнопки на всю ширину мають ширину 100% і охоплюють всю ширину батьківського елемента:
Приклад
<button class="w3-button w3-block">Кнопка</button>
<button class="w3-button w3-block w3-teal">Кнопка</button>
<button class="w3-button w3-block w3-red w3-left-align">Кнопка</button>
<button class="w3-btn w3-block">Кнопка</button>
<button class="w3-btn w3-block w3-teal">Кнопка</button>
<button class="w3-btn w3-block w3-red w3-left-align">Кнопка</button>
Порада: Вирівняйте текст кнопки за допомогою класу w3-left-align або w3-right-align.
Розмір блоку може бути визначений за допомогою style="width:".
Приклад
<button class="w3-button w3-block w3-black" style="width:30%">Button</button>
<button class="w3-button w3-block w3-teal" style="width:50%">Button</button>
<button class="w3-button w3-block w3-red" style="width:80%">Button</button>
Вимкнені кнопки
Кнопки виділяються ефектом тіні, і стрілка курсору перетворюється в руку при наведенні на них курсору.
Вимкнені кнопки непрозорі (напівпрозорі) та відображають знак "no parking sign" ("парковка заборонена"):
Клас w3-disabled використовується для створення вимкненої (disabled) кнопки (якщо елемент підтримує стандартний disabled атрибут HTML, замість нього можна використовувати disabled атрибут):
Приклад
<a class="w3-button w3-disabled" href="https://www.w3schools.com">Кнопка-посилання</a>
<button class="w3-button" disabled>Кнопка</button>
<input type="button" class="w3-button" value="Button" disabled>
<a class="w3-btn w3-disabled" href="https://www.w3schools.com">Кнопка-посилання</a>
<button class="w3-btn" disabled>Кнопка</button>
<input type="button" class="w3-btn" value="Button" disabled>
Кнопки-панелі (бари)
Кнопки можна згрупувати в горизонтальній смузі за допомогою класу w3-bar:
Приклад
<div class="w3-bar">
<button class="w3-button w3-black">Кнопка</button>
<button class="w3-button w3-teal">Кнопка</button>
<button class="w3-button w3-red">Кнопка</button>
</div>
Клас w3-bar з’явився в W3.CSS версії 2.93 / 2.94.
Кнопки можуть бути згруповані без пробілів між ними за допомогою класу w3-bar-item:
Приклад
<div class="w3-bar">
<button class="w3-bar-item w3-button w3-black">Кнопка</button>
<button class="w3-bar-item w3-button w3-teal">Кнопка</button>
<button class="w3-bar-item w3-button w3-red">Кнопка</button>
</div>
Панелі кнопок можна центрувати за допомогою класу w3-center:
Приклад
<div class="w3-center">
<div class="w3-bar">
<button class="w3-button w3-black">Кнопка</button>
<button class="w3-button w3-teal">Кнопка</button>
<button class="w3-button w3-disabled">Кнопка</button>
</div>
</div>
Щоб показати дві (або більше) панелі кнопок в одному рядку, додайте клас w3-show-inline-block:
Приклад
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Кнопка</button>
<button class="w3-btn w3-teal">Кнопка</button>
<button class="w3-btn w3-disabled">Кнопка</button>
</div>
</div>
<div class="w3-show-inline-block">
<div class="w3-bar">
<button class="w3-btn">Кнопка</button>
<button class="w3-btn w3-teal">Кнопка</button>
<button class="w3-btn w3-disabled">Кнопка</button>
</div>
</div>
Навігаційні панелі (навбари)
Панелі кнопок можна легко використовувати як панелі навігації:
Приклад
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button">Кнопка</button>
<button class="w3-bar-item w3-button">Кнопка</button>
<button class="w3-bar-item w3-button">Кнопка</button>
</div>
Розмір кожного елементу можна визначити за допомогою style="width:":
Приклад
<div class="w3-bar">
<button class="w3-bar-item w3-button" style="width:33.3%">Кнопка</button>
<button class="w3-bar-item w3-button w3-teal" style="width:33.3%">Кнопка</button>
<button class="w3-bar-item w3-button w3-red" style="width:33.3%">Кнопка</button>
</div>
Ви дізнаєтесь більше про навігації пізніше в цьому підручнику на нашому сайті W3Schools українською.
Ліва і права кнопки
Використовуйте клас .w3-left та клас .w3-right щоб переміщувати кнопки вліво або вправо:
Використовується для створення кнопок "previous/next" (попередня/наступна):
Приклад
<div class="w3-bar">
<button class="w3-button w3-left">Зліва</button>
<button class="w3-button w3-right">Справа</button>
</div>
Кнопки з ефектами ripple (хвилі)
w3-ripple створює ефект ripple (хвилі) для кнопок (при натисканні на них):
Приклад
<button class="w3-button w3-ripple">Button</button>
<button class="w3-button w3-ripple w3-red">Кнопка</button>
<button class="w3-button
w3-ripple w3-yellow">Кнопка</button>
Всі елементи можуть бути кнопками
За допомогою таблиці стилів W3.CSS всі елементи можна зробити кнопкою:
Картинка може бути w3-button
Картинка може бути w3-btn
Будь-який div, header, footer або інші контейнери можуть бути w3-btn!
Круглі кнопки
Клас w3-circle можна використовувати для створення круглих кнопок:
Приклад
<button class="w3-button w3-circle w3-black">+</button>
<button class="w3-button w3-circle w3-teal">+</button>
Квадратні кнопки:
Приклад
<button class="w3-button w3-black">+</button>
<button class="w3-button w3-teal">+</button>
