Тег <button> — кнопка в HTML: type, submit і приклади

Теґ <button> створює на веб-сторінці кнопку і за своєю дією нагадує результат, одержаний за допомогою теґа <input type="text"> (з атрибутом type="button | reset | submit").

На відміну від теґа <input type="button">, теґ <button> пропонує ширші можливості по створенню кнопок. Наприклад, в кнопці можна розміщувати будь-які елементи HTML, в тому числі зображення.

Кнопка, що створена за допомогою елемента <button> може розміщуватися поза межами форми, але щоб у неї була можливість відправляти дані на сервер, необхідно, щоб кнопка розміщувалася в формі.

Ось так виглядає стандартна кнопка: Кнопка

Кнопка з малюнком:

правити

Загальний опис

правити

Порада

Використовуйте CSS стилі, щоб задати кнопці нестандартний вид, це робиться шляхом зміни шрифту, кольору тла, розмірів та інших властивостей.

автор: NagarD правити

Нотатка

Якщо ви використовуєте теґ <button>, завжди вказуйте атрибут type, тому, що різні браузери встановлюють різні початкові значення цього атрибута.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

<button type="button">Кнопка</button>

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	≤15	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<button type="button" class="btn">Зберегти</button>
<button type="button" class="btn" disabled>Вимкнена</button>

.btn {
    appearance: none;
    border: 0;
    padding: .6rem 1.2rem;
    border-radius: .4rem;
    background: #2d6cdf;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.btn:hover {
    background: #2456b0;
}

.btn:focus-visible {
    outline: 3px solid #ffb703;
    outline-offset: 2px;
}

.btn:disabled {
    background: #9aa5b1;
    cursor: not-allowed;
}

<p>Приклад використання атрибута <code>button</code><p/> 
<button type = "button" name = "button1" style = "width: 80px; height:50px;">
			<b>Кнопка 1</b>
		</button><br><br>
		<button type = "button" name = "button2" style = "width: 80px; height:50px" value="" class="a1">Кнопка 2
			<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt = "up" width = "30" height = "30">
		</button><br><br>
		<button type = "button" name = "button3" style = "width: 80px; height:50px;">
			<i>Кнопка 3</i>
		</button><br><br>

*{
  text-align: center;
}
.a1{
   text-align: center;
}