Кнопка представляет собой тег button.
Он создает кнопку по которой можно кликнуть.
Стандартная кнопка выглядит следующим образом:
Отображение кнопки в google chrome
Отображение кнопки в mozilla firefox
Технические детали
Кнопки используются в формах для отправки данных и сброса заполненных данных.
Кнопки используются за пределами формы как самостоятельный элемент, который с помощью js может выполнять необходимые действия.
Внутри кнопки можно разместить любой html.
Специфические атрибуты кнопки
autofocus - кнопка получает фокус
disabled - неактивная кнопка
name - уникальное имя кнопки, название параметра которое будет отправлено на сервер
value - значение которое будет отправлено на сервер
Состояния кнопки
focus - кнопка в фокусе
hover - реакция кнопки на наведение
active - кнопка нажата
disabled - кнопка заблокирована
Для иллюстрации всех состояний рассмотрим примеры:
Дизайн и поведение кнопок зависит полностью от макета.
Задавать состояния кнопок является хорошим тоном при верстке, и это нужно делать.
На что обратить внимание
Свойство appearance позволяет задавать внешний вид одних элементов другим элементам.
При этом браузер будет обрисовывать их с учётом текущей операционной системы пользователя и темы оформления. Лучше его всегда сбрасывать appearance: none;
Нужно обязательно задавать min-width, чтобы контент кнопки не зависел от ее размера.
Так же необходимо задавать padding. Это даёт больше уверенности в том, что кнопка будет хорошо выглядеть в ситуации, когда заранее неизвестна длина выводимой на ней надписи.
Сбросить или задать семейство шрифта font-family: inherit;
Установить вид курсора при наведении на кнопку cursor: pointer. Например, если кнопка заблокирована, то тип курсора можно задать как cursor: not-allowed;
