HTML Тег <button>
Приклад
Кнопка, яку можна натиснути, позначається наступним чином:
<button type="button">Тицни мене!</button>
Спробуйте самі »
Більше прикладів "Спробуйте самі" далі.
Визначення та використання
Тег <button> визначає кнопку, яку можна натиснути (клікабельну).
Всередині елемента <button> ви можете розмістити текст (і теги, як-от <i>, <b>, <strong>, <br>, <img> та ін.). Це неможливо з кнопкою, створеною за допомогою елемента <input>!
Порада: Завжди вказуйте атрибут type для елемента <button>, щоб повідомити браузерам, який це тип кнопки.
Порада: Ви можете легко стилізувати кнопки за допомогою CSS! Перегляньте наведені нижче приклади або відвідайте посібник CSS Кнопки на нашому сайті W3Schools українською.
Підтримка браузерами
| Елемент | |||||
|---|---|---|---|---|---|
| <button> | Yes | Yes | Yes | Yes | Yes |
Атрибути
| Атрибут | Значення | Опис |
|---|---|---|
| autofocus | autofocus | Вказує, що кнопка має автоматично отримувати фокус під час завантаження сторінки |
| disabled | disabled | Вказує, що кнопка має бути вимкнена |
| form | form_id | Визначає, до якої форми належить кнопка |
| formaction | URL | Визначає, куди надсилати дані форми під час надсилання форми. Лише для type="submit" |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Визначає спосіб кодування даних форми перед надсиланням на сервер. Лише для type="submit" |
| formmethod | get post |
Визначає спосіб надсилання даних форми (який метод HTTP використовувати). Лише для type="submit" |
| formnovalidate | formnovalidate | Вказує, що дані форми не повинні перевірятися під час надсилання. Лише для type="submit" |
| formtarget | _blank _self _parent _top framename |
Визначає, де відображати відповідь після надсилання форми. Лише для type="submit" |
| name | name | Визначає назву для кнопки |
| type | button reset submit |
Визначає тип кнопки |
| value | text | Визначає початкове значення для кнопки |
Глобальні атрибути
Тег <button> також підтримує Глобальні атрибути в HTML.
Атрибути подій
Тег <button> також підтримує Атрибути подій в HTML.
Більше прикладів
Приклад
Використовуйте CSS для стилізації кнопок:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
Спробуйте самі »
Приклад
Використовуйте CSS для оформлення кнопок (з ефектом наведення):
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
Спробуйте самі »
Пов’язані сторінки
HTML DOM Довідник: Об’єкт Button
CSS Підручник: Стилізація кнопок
CSS налаштування за замовчуванням
Немає.
