Для стилизации обычно применяются классы, через которые можно задавать оформление отдельных кнопок. К примеру, чтобы изменить вид элемента <button>, к нему добавляем класс .btn. Чтобы увеличить размер кнопки, к ней ещё добавляем класс .medium. В итоге у кнопки может оказаться набор стилевых классов, каждый из которых выполняет свою роль.
<button class="btn medium">Кнопка</button>
Кроме добавления классов мы можем ориентироваться на наличие атрибутов элемента <button> и в зависимости от их значений менять стиль кнопок.
Атрибут type
Этот атрибут определяет роль кнопки: обычная, для отправки формы или для её очистки. В табл. 1 показаны возможные значения атрибута type.
| Значение type |
Описание |
Пример |
| button |
Обычная кнопка. |
<button type="button">Кнопка</button>
|
| submit |
Кнопка для отправки формы. |
<form action="handler.php">
<button>Отправить</button>
</form>
|
| reset |
Кнопка для очистки формы и возврату полей к исходным значениям. |
<form action="handler.php">
<input type="search" name="s">
<button>Отправить</button>
<button type="reset">Очистить</button>
</form>
|
По умолчанию к type применяется значение submit, поэтому внутри формы у кнопки атрибут type можно опустить.
По внешнему виду кнопки с разными ролями никак не различаются между собой, но через селекторы атрибутов кнопкам можно задать разный стиль. Селекторы для определения стилей кнопок будут следующими:
- button[type="button"] {…}
- button[type="submit"] {…}
- button[type="reset"] {…}
Чтобы не повторять одинаковые стилевые правила, сперва добавляем свойства к селектору button, а затем уже к селекторам с button[type]. Свойства у button наследуются, поэтому переопределить нужно только различающиеся значения. В итоге все кнопки будут оформлены единообразно, различаясь друг с другом цветом.
В примере 1 показана форма для поиска с текстовым полем и двумя кнопками: первая кнопка отправляет введённую текстовую строку на сервер, а вторая очищает форму. Эти кнопки различаются цветом фона, текста и рамки.
Пример 1. Кнопки разных цветов
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
input[type="search"] {
padding: 0.5em; /* Поля вокруг текста */
}
button {
padding: 0.5em 1.5em; /* Поля по вертикали и горизонтали */
font-size: 0.9em; /* Размер текста */
border: 1px solid #bc8e5c; /* Параметры рамки */
background-color: #fff; /* Цвет фона кнопки */
}
button[type="submit"] {
background-color: #bc8e5c; /* Цвет фона кнопки */
color: #fff; /* Цвет текста */
}
button[type="reset"] {
border-color: #676767; /* Цвет рамки */
color: #444; /* Цвет текста */
}
</style>
</head>
<body>
<form action="/example/handler.php">
<p><input type="search" placeholder="Поиск по сайту"></p>
<p><button type="submit">Искать</button> <button type="reset">Очистить</button></p>
</form>
</body>
</html>
Здесь вокруг кнопки с type="reset" добавлена рамка, что несколько увеличивает размер кнопки. Чтобы все кнопки получились одинаковой высоты, к ним добавляется рамка, цвет которой совпадает с цветом фона.
Вместо изменения цвета, рядом с надписью на кнопке можно показать соответствующую иконку. Элемент <button> позволяет комбинировать изображения с текстом.
<p><button><img src="image/button-cart.svg">Добавить в корзину</button></p>
Альтернативный путь состоит в использовании ::before, он создаёт псевдоэлемент до содержимого самого элемента, в нашем случае, <button>. Для этого псевдоэлемента иконку выводим как фоновую картинку через свойство background (пример 2).
Пример 2. Использование ::before
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
input[type="search"] {
padding: 0.5em; /* Поля вокруг текста */
}
button {
padding: 0.5em 1.5em; /* Поля по вертикали и горизонтали */
background-color: #f8f7f7; /* Цвет фона кнопки */
color: #202020; /* Цвет текста */
font-size: 0.9em; /* Размер текста */
border: 1px solid #e9e8e8; /* Параметры рамки */
}
button[type="submit"]::before,
button[type="reset"]::before {
content: ''; /* Выводим псевдоэлемент */
display: inline-block; /* Строчно-блочный элемент */
vertical-align: middle; /* Выравнивание по вертикали */
width: 16px; height: 16px; /* Размеры иконки */
margin-right: 1em; /* Расстояние справа */
}
button[type="submit"]::before {
/* Иконка для кнопки Submit */
background: 0/cover url(/example/image/button-search.svg);
}
button[type="reset"]::before {
/* Иконка для кнопки Reset */
background: 0/cover url(/example/image/button-reset.svg);
}
</style>
</head>
<body>
<form action="/example/handler.php">
<p><input type="search" placeholder="Поиск по сайту"></p>
<p><button type="submit">Искать</button> <button type="reset">Очистить</button></p>
</form>
</body>
</html>
У свойства background из примера указано три параметра:
- 0 — картинка располагается в левом верхнем углу;
- cover — картинка масштабируется и вписывается в размеры иконки (они определяются свойствами width и height);
- url() — адрес картинки.
Атрибут disabled
Атрибут disabled, добавленный к <button>, блокирует кнопку, после чего по такой кнопке нельзя щёлкнуть и она отображается бледнее обычной.
Для управления стилем блокированной кнопкой можно воспользоваться селектором button[disabled], а также более современным методом — псевдоклассом :disabled.
В примере 3 у блокированной кнопки меняется цвет фона, текста и вид курсора при наведении на кнопку.
Пример 3. Использование :disabled
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
.field {
padding: 0.5em; /* Расстояние от текста до края */
}
.btn-next {
padding: 0.5em 1em; /* Расстояние от текста до края */
}
.btn-next {
background-color: #0174da; /* Цвет фона */
color: #fff; /* Цвет текста */
border: none; /* Убираем рамку */
border-radius: 0.4em; /* Скругление уголков */
}
.btn-next:disabled {
background-color: #e5e5e5; /* Цвет фона */
color: #737373; /* Цвет текста */
cursor: not-allowed; /* Меняем вид курсора */
}
</style>
</head>
<body>
<p><input class="field" placeholder="Введите своё имя"></p>
<p><button disabled class="btn-next">Продолжить</button></p>
<script>
var field = document.querySelector('.field'); // Поле для ввода имени
var next = document.querySelector('.btn-next'); // Кнопка
field.addEventListener('input', function() {
// Проверяем, что поле не пустое
// Если поле пустое, то блокируем кнопку
if(field.value != '') next.disabled = false;
// Если поле не пустое, то кнопка разблокируется
else next.disabled = true;
});
</script>
</body>
</html>
Здесь изначально кнопка заблокирована через атрибут disabled и становится доступной после написания любого символа в текстовом поле. Если текст стереть, то кнопка вернётся к своему заблокированному состоянию.
Итоги
- У элемента <button> есть два часто используемых атрибута: type и disabled.
- Атрибут type определяет роль кнопки: обычная кнопка, кнопка для отправки формы и кнопка для возврата введённых в форму данных к исходным значениям.
- Для стилизации кнопок с разными значениями type применяются селекторы button[type="submit"], button[type="reset"], button[type="button"].
- Атрибут disabled блокирует кнопку от нажатия — по такой кнопке нельзя щёлкнуть. С помощью JavaScript атрибут можно убирать или добавлять, в зависимости от заданных условий.
- Стиль заблокированной кнопки меняется через псевдокласс :disabled, для этого используется селектор button:disabled.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 25.05.2023