HTML Тег <button>

Пример

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

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

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

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

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

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

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

Поддержка браузеров <button>

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

Атрибуты <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"
name	name	Задает имя для кнопки
type	button reset submit	Указывает тип кнопки
value	text	Задает начальное значение для кнопки

Глобальные атрибуты <button>

Тег <button> также поддерживает Глобальные атрибуты в HTML.

События атрибутов <button>

Тег <button> также поддерживает События атрибутов в HTML.

Еще примеры <button>

Пример

Используйте 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;} /* Зеленый */
.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 #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">Зеленый</button>
<button class="button button2">Синий</button>

</body>
</html>

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