HTML Тег <button>

Пример

Кликабельная кнопка размечается следующим образом:

<button type="button">Нажми меня!</button>

Другие примеры "Попробуйте сами" ниже.

Определение и использование

Тег <button> определяет кликабельную кнопку.

Внутри элемента <button> вы можете поместить текст (и теги, такие как <i>, <b>, <strong>, <br>, <img>, и т.д.). Это невозможно с кнопкой, созданной с помощью элемента <input>!

Совет: Всегда указывайте атрибут type для элемента <button>, чтобы сообщить браузерам, какой это тип кнопки.

Совет: Вы можете легко стилизовать кнопки с помощью CSS! Посмотрите примеры ниже или посетите наш учебник по Кнопкам CSS.

Поддержка браузерами

Элемент
<button>	Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
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"
popovertarget	element_id	Указывает, какой всплывающий элемент (popover) вызывать
popovertargetaction	hide show toggle	Указывает, что происходит со всплывающим элементом (popover) при нажатии кнопки
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: #04AA6D;} /* Зеленый */
.button2 {background-color: #008CBA;} /* Синий */
</style>
</head>
<body>

<button class="button button1">Зеленый</button>
<button class="button button2">Синий</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 #04AA6D;
}

.button1:hover {
background-color: #04AA6D;
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">Зеленый</button>
<button class="button button2">Синий</button>

</body>
</html>

Попробуйте сами »