HTML Кнопки
Кнопки дозволяють користувачам взаємодіяти з вебсторінкою. Вони можуть надсилати форми, запускати JavaScript або запускати різні дії при натисканні.
HTML Кнопка
Як зробити кнопку в HTML? Дуже просто! HTML-елемент <button> визначає кнопку, на яку можна натискати.
Сама по собі кнопка нічого не робить, поки ви не додасте до неї дію.
Стилізація HTML кнопок
Кнопки часто стилізуються за допомогою CSS:
Вимкнені кнопки
Використайте атрибут disabled, щоб зробити кнопку неклікабельною:
Підказка: Вимкнені кнопки неможливо натиснути, і вони зазвичай виглядають бляклими.
Кнопка з JavaScript
Ви можете запускати JavaScript, коли користувач натискає кнопку, використовуючи атрибут onclick:
Примітка: Ви дізнаєтесь більше про JavaScript у розділі HTML JavaScript на нашому сайті W3Schools українською.
Типи кнопок
Атрибут type визначає, що робить кнопка після натискання. Існує три типи кнопок:
type="button"- Звичайна кнопка, на яку можна натиснути (за замовчуванням нічого не робить)type="submit"- Надсилає формуtype="reset"- Скидає всі поля форми
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
Кнопки часто використовуються всередині форм, про які ви дізнаєтеся більше в наступному розділі.
Наразі просто знайте, що кнопка submit надсилає дані форми на сервер, тоді як кнопка reset очищує форму:
Приклад
<form action="/action_page.html">
First name: <input type="text" name="fname">
<button type="submit">Submit</button>
<button type="reset">Reset Form</button>
</form>
Спробуйте самі »
Примітка: Завжди слід вказувати атрибут type. Усередині форми тип за замовчуванням — submit, і браузери можуть поводитися інакше, якщо цей type пропустити.
Кнопка чи посилання?
Коли використовувати <a> (посилання)?
Тег <a> створює гіперпосилання. Він використовується коли потрібно перейти на іншу сторінку або на інший розділ сторінки.
Правило: Якщо дія — це перехід, використовуйте тег <a>.
Приклад
<a href="https://example.com">Перейти на інший сайт</a>
Або для переходу на якийсь розділ сторінки:
Приклад
<a href="#contact">До контакту</a>
Коли використовувати <button> (кнопку)?
Тег <button> створює елемент, який виконує дію на тій самій сторінці — наприклад, надсилання форми, відкриття спливаючого вікна (модалки), запуск JavaScript.
Правило: Якщо дія — це запуск події на сторінці, використовуйте <button>.
Приклад - надсилання форми:
<form>
<input type="text" placeholder="Ваше імʼя">
<button type="submit">Відправити</button>
</form>
або
Приклад - кнопка для JavaScript (відкриття модалки):
<button onclick="openModal()">Відкрити модалку</button>
<script>
function openModal() {
alert("Модалка відкрита");
}
</script>
Порівняльна таблиця посилання та кнопки
| Характеристика | Посилання <a> | Кнопка <button> |
|---|---|---|
| Мета | Навігація (куди?) | Дія (що зробити?) |
| Клавіатура | Активується клавішею Enter | Активується Enter або Space (пробіл) |
| Стан браузера | Змінює історію/URL | Не змінює історію (зазвичай) |
| Контекстне меню | Має пункт «Відкрити в новій вкладці» | Не має навігаційних пунктів |
Підказка для початківців: Якщо ви пишете href="javascript:void(0)" або href="#", щоб посилання нікуди не вело — ви помилилися. Вам потрібен тег <button>.
Кнопка з іконкою в HTML
Усередині тега <button> можна розміщувати будь-який HTML-контент: текст, зображення (<img>), SVG-іконки або їх комбінацію. Це стандартна і правильна практика.
Іконка через <img>
Найпростіший варіант — вставити зображення всередину кнопки.
Приклад
<button>
<img src="icon-save.png" alt="Іконка збереження" width="16" height="16">
Зберегти
</button>
Пояснення:
<img>вставляється так само як звичайний текст.- обов’язковий атрибут
alt=""залишають порожнім, якщо поруч є текст (інакше скрінрідери читатимуть зайве). - розмір іконки зазвичай задають через width / height або CSS.
Кнопка лише з іконкою
Якщо кнопка без тексту, потрібно додати пояснення для доступності - aria-label="".
Приклад
<button aria-label="Пошук">
<img src="icon-search.png" alt="Іконка пошуку">
</button>
Іконка через SVG (рекомендовано)
Іконка через SVG — найкращий варіант: чіткий на будь-якому екрані, легко стилізується через CSS.
Приклад
<button>
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 12h18M12 3v18" stroke="currentColor" stroke-width="2"/>
</svg>
Додати
</button>
Переваги SVG:
- Не розмивається;
- Наслідує колір тексту (currentColor);
- Не потребує окремого файлу.
Типова помилка:
❌ Неправильно:
<a href="#">
<button>OK</button>
</a>
✔ Правильно:
<button>
<img src="icon-ok.png" alt="Іконка Ok">
OK
</button>
Коротко:
<button>може містити іконки, текст і SVG<img>— просто і зрозуміло- SVG — сучасно і правильно
- Кнопка без тексту → aria-label обов’язково
Доступність (Accessibility / A11y) для кнопок
Що таке доступність (accessibility) і для чого це потрібно?
Доступність — це практика створення вебінтерфейсів, які можуть використовувати всі люди, включно з тими, хто має обмеження зору, слуху, моторики чи когнітивні труднощі. Якщо кнопки не доступні, користувачі з екранними рідерами, клавіатурною навігацією чи іншими асистивними технологіями не зможуть ефективно взаємодіяти з інтерфейсом.
Неправильні кнопки ускладнюють життя — люди не розуміють, куди клікати, не чують чи не бачать підказок, не можуть потрапити на потрібну дію з клавіатури. Це не про “красу” — це про функціональність для всіх.
Як писати кнопки, дружні до асистивних технологій?
Принцип: кнопка завжди має бути елементом <button> (або елементом з роллю кнопки, якщо це складний UI), і її текст має бути коротким, але чітким про дію.
Погано:
<button></button> <!-- не має тексту — нічого не описує -->
<button><img src="icon.png"></button> <!-- лише іконка без опису -->
Добре:
<button>Відправити форму</button>
<button>Закрити діалог</button>
Чому доступність - це важливо для кнопок?
Люди з порушеннями зору використовують скрінрідери (програми, що озвучують текст на екрані). Якщо ви замість кнопки використаєте просто картинку або <div>, скрінрідер не повідомить користувачу, що на цей елемент можна натиснути.
Ключові правила доступності для кнопок:
- Зрозумілий текст (Accessible Name):
Кнопка повинна мати текст, який пояснює дію.- Погано: <button>Натисни сюди</button> (Незрозуміло, що станеться).
- Добре: <button>Завантажити звіт у PDF</button>
- Кнопки-іконки та aria-label:
Якщо ваша кнопка містить лише іконку (наприклад, «хрестик» для закриття), скрінрідер прочитає її як «кнопка, пустий текст». Використовуйте атрибут aria-label, щоб дати кнопці ім'я.Приклад HTML:
<button aria-label="Закрити вікно">
<img src="close-icon.svg" alt="Іконка закриття">
</button> - Візуальний фокус (Focus Indicator):
Багато початківців видаляють «синю рамку» (outline), яка з'являється навколо кнопки при натисканні або переході клавішею Tab. Ніколи не робіть цього без заміни іншим стилем! Люди, які не користуються мишкою, мають бачити, де вони зараз знаходяться.Приклад CSS:
/* Погано: користувач клавіатури "загубиться" */
button:focus {
outline: none;
}
/* Добре: ми прибрали стандартний стиль, але зробили свій помітний */
button:focus {
outline: none;
box-shadow: 0 0 0 4px orange;
} - Робота з клавіатурою:
Тег <button> автоматично підтримує натискання клавішами Enter та Space. Якщо ви зробите кнопку з <div>, вам доведеться власноруч писати JavaScript код, щоб вона реагувала на клавіатуру. Тому завжди використовуйте рідний тег.
Коли кнопка має лише іконку — додавайте текстовий опис або ARIA-мітку.
Використання ARIA (наприклад, aria-label) коли текст кнопки не описовий
ARIA — це набір атрибутів для додання семантики елементам, коли цього неможливо досягти через звичайну розмітку.
В разі кнопки без видимого тексту (наприклад, тільки іконка), завжди додавайте aria-label або aria-labelledby, щоб екранні рідери могли прочитати призначення:
Приклад — кнопка з іконкою "Закрити":
Приклад
<button aria-label="Закрити">
<svg width="16" height="16" aria-hidden="true">
<!-- графіка X -->
</svg>
</button>
Якщо кнопка має видимий текст — зробіть його описовим, і ARIA не потрібна:
Приклад
<button>Додати до кошика</button>
Ще варіант — коли кнопка є частиною складнішого елемента:
Приклад
<button aria-labelledby="btnText btnHint">
<span id="btnText">Фільтрувати</span>
<span id="btnHint" class="visually-hidden">за ціною</span>
</button>
Тут visually-hidden — це клас, що ховає текст візуально, але залишає його доступним для рідерів.
Фокусна поведінка (Keyboard focus)
Користувачі, що не використовують мишу, переміщаються по сторінці клавіатурою (Tab, Shift+Tab, Enter, Space). Кнопки мають бути фокусовані за допомогою Tab, і мати чіткий візуальний індикатор фокусу.
Правило:
- Елемент <button> автоматично фокусується клавіатурою.
- Забороняйте прописувати outline: none; без заміни на інший чіткий стиль фокусу.
- Фокус має бути видно.
Приклад CSS для чіткого фокуса:
button:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
Приклад HTML:
<button>Пошук</button>
Навіть якщо кнопка виглядає як текст чи іконка, вона має бути доступною через Tab і мати фокусну рамку.
Підсумок: чек-лист для доступних кнопок
- Використовуйте <button> замість <div> чи <span> з JavaScript.
- Забезпечте видимий текст кнопки, що чітко описує дію.
- Якщо текст не видимий — додайте aria-label або aria-labelledby.
- Забезпечте підтримку клавіатурної навігації та чіткий стиль фокусу.
- Не прибирайте стандартні ознаки фокусу без альтернативи.
Поєднання HTML+CSS для правильної кнопки
Ось приклад правильної, доступної кнопки, яка виглядає сучасно та зрозуміла для всіх:
Приклад HTML + CSS:
<button type="button" class="btn-primary" aria-label="Надіслати повідомлення">
<span>Надіслати</span>
<svg>...</svg>
</button>
<style>
.btn-primary {
padding: 10px 20px;
background: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* Забезпечуємо доступність при фокусі */
.btn-primary:focus {
outline: 3px solid #ffcc00;
outline-offset: 2px;
}
/* Стиль для стану, коли кнопка натиснута */
.btn-primary:active {
transform: translateY(1px);
}
</style>
Спробуйте самі »
Стилізація станів кнопок (CSS Pseudo-classes)
Щоб зробити інтерфейс «живим», кнопка повинна змінювати свій вигляд залежно від того, що з нею робить користувач. У CSS для цього використовуються псевдокласи.
4 головні стани кнопки:
- :hover (наведення) — активується, коли користувач наводить курсор миші на кнопку.
- :focus (фокус) — активується, коли користувач вибирає кнопку за допомогою клавіатури (клавіша Tab). Надзвичайно важливо для доступності.
- :active (натискання) — момент безпосереднього кліку мишкою по кнопці.
- :disabled (вимкнено) — вигляд кнопки, коли вона неактивна (має атрибут disabled).
Приклад професійної стилізації
Нижче наведено код сучасної кнопки з плавними переходами та чіткими станами.
Приклад HTML:
<div class="button-demo-container">
<button class="btn-modern">Активна кнопка</button>
<button class="btn-modern" disabled>Вимкнена кнопка</button>
</div>
Приклад CSS:
/* Базові стилі кнопки */
.btn-modern {
background-color: #04AA6D; /* Фірмовий зелений */
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease; /* Плавний перехід для всіх властивостей */
outline: none;
}
/* Стан: Наведення мишею */
.btn-modern:hover {
background-color: #059862;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-2px); /* Кнопка ніби піднімається */
}
/* Стан: Фокус (для клавіатури) */
.btn-modern:focus {
box-shadow: 0 0 0 4px rgba(4, 170, 109, 0.4);
background-color: #059862;
}
/* Стан: Натискання */
.btn-modern:active {
transform: translateY(0); /* Повертається на місце */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Стан: Вимкнено */
.btn-modern:disabled {
background-color: #cccccc;
color: #666666;
cursor: not-allowed; /* Курсор показує заборону */
transform: none;
box-shadow: none;
}
Спробуйте самі »
Результат:
Докладніше про стилізацію кнопок на вебсторінці ви можете дізнатись з уроку CSS Кнопки на нашому сайті W3Schools українською.
HTML Довідник з кнопок
| Тег | Опис |
|---|---|
| <button> | Визначає кнопку, на яку можна натиснути |
Підказка: Щоб переглянути повний список усіх тегів HTML, відвідайте Довідник з HTML-тегів.
Атрибути кнопки
| Атрибут | Значення | Опис |
|---|---|---|
| type |
button submit reset |
Визначає тип кнопки. За замовчуванням — submit |
| name | текст | Ім’я кнопки, яке надсилається разом із формою |
| value | текст | Значення кнопки, яке надсилається на сервер |
| disabled | disabled | Вимикає кнопку — вона стає неактивною |
| autofocus | autofocus | Автоматично встановлює фокус на кнопку при завантаженні |
| form | ID форми | Прив’язує кнопку до форми, навіть якщо вона поза <form> |
| formaction | URL | URL для надсилання даних (перевизначає action форми) |
| formenctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
Тип кодування даних форми |
| formmethod |
get post |
Метод надсилання форми |
| formnovalidate | formnovalidate | Вимикає валідацію при надсиланні |
| formtarget |
_self _blank _parent _top |
Де відкривати результат надсилання |
| popovertarget | ID елемента | Прив’язує кнопку до popover-елемента |
| popovertargetaction |
toggle show hide |
Дія для popover-елемента |
❓ FAQ (Питання та відповіді по уроку)
Для чого потрібні кнопки на вебсторінці?
Кнопки дозволяють користувачам взаємодіяти з вебсторінкою. Вони можуть надсилати форми, запускати JavaScript або запускати різні дії при натисканні.
Як зробити кнопку в HTML?
Для створення кнопки в HTML використовується елемент <button>, що визначає кнопку, на яку можна натискати.
Який html-елемент на вебсторінці визначає кнопку, на яку можна натискати?
Елемент HTML <button> визначає кнопку, на яку можна натискати. Сама по собі кнопка нічого не робить, доки ви не додасте до неї дію.
За допомогою чого стилізуються кнопки на вебсторінці?
Кнопки на вебсторінці найчастіше стилізуються за допомогою CSS.
Який використовується атрибут, щоб зробити кнопку на вебсторінці ненатискальною (неклікабельною)?
Щоб зробити кнопку ненатискальною, використовуйте атрибут disabled. Вимкнені кнопки не можна натискати, і вони зазвичай виглядають бляклими.
Який атрибут використовується, щоб запускати JavaScript, коли користувач натискає кнопку?
Щоб запустити JavaScript, коли користувач натискає кнопку, використовується атрибут onclick.
Які існують типи кнопок на вебсторінці?
Існує три типи кнопок:
- type="button" - Звичайна кнопка, на яку можна натискати (за замовчуванням нічого не робить)
- type="submit" - Надсилає форму
- type="reset" - Скидає всі поля форми
Для чого найчастіше використовуються кнопки на вебсторінці?
Найчастіше кнопки на вебсторінці використовуються всередині форм:
- Кнопка надсилання надсилає дані форми на сервер;
- Кнопка скидання очищає форму.
У чому головна різниця між кнопкою та посиланням?
Посилання (<a>) використовується для навігації та зміни URL, тоді як кнопка (<button>) призначена для виконання функціональних дій на поточній сторінці.
Чому варто використовувати <button> замість <input>?
Елемент <button> дозволяє розміщувати всередині себе HTML-контент, наприклад іконки або складне форматування, що неможливо з тегом <input>.
Як зробити кнопку неактивною?
Використовуйте атрибут disabled, щоб зробити кнопку неклікабельною. Вона автоматично змінить вигляд на бляклий у більшості браузерів.
Який сайт українською мовою є найкращим для вивчення HTML онлайн?
Найкращим сайтом для вивчення HTML є сайт W3Schools українською.
📚 Додаткові ресурси для глибокого вивчення
Для тих, хто хоче знати про тег <button> абсолютно все, рекомендуємо звернутися до першоджерел та офіційної документації:
- MDN Web Docs: <button> — найповніший практичний посібник для розробників з прикладами та таблицею підтримки браузерами.
- WHATWG: HTML Living Standard - <button> — офіційна технічна специфікація, де описана внутрішня логіка роботи кнопок.
- W3C: Керівництво з доступності (WAI-ARIA) — стандарти створення кнопок, якими зможуть користуватися всі, включаючи людей з порушеннями зору.
