Через CSS к любой кнопке применяются следующие параметры оформления: ширина и высота, фон, рамку, цвет и размер текста и др. Также к самим кнопкам и к тексту на них можно добавить тень.
Ширина и высота кнопки
Размеры кнопки явно устанавливать обычно необходимости нет, потому что кнопки автоматически подстраивают свой размер под имеющийся текст или изображение. Тем не менее, иногда в угоду дизайну приходится указывать ширину и высоту кнопки через соответствующие свойства width и height (пример 1).
Пример 1. Размеры кнопки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
.btn {
width: 10em; /* Ширина кнопки */
height: 3em; /* Высота кнопки */
}
</style>
</head>
<body>
<p><button class="btn">Кнопка</button></p>
</body>
</html>
Также на размер кнопки можно косвенно влиять через свойство padding. Оно добавляет пространство вокруг текста, расширяя кнопку по вертикали и горизонтали (пример 2).
Пример 2. Использование padding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
.btn {
padding: 0.5em 1.5em; /* Поля по вертикали и горизонтали */
}
</style>
</head>
<body>
<p><button class="btn">Кнопка</button></p>
</body>
</html>
Здесь у свойства padding два значения: первое устанавливает пространство вокруг текста по вертикали, второе по горизонтали.
Параметры текста
К тексту на кнопке применимы те же свойства, что и для обычного текста. В частности, допустимо менять шрифт, размер текста, его насыщенность, цвет и др. В примере 3 для текста кнопки устанавливается зелёный цвет и моноширинный шрифт с заглавными буквами.
Пример 3. Текст на кнопке
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
.btn {
padding: 0.5em 1.5em; /* Поля по вертикали и горизонтали */
color: green; /* Цвет текста */
font-family: monospace; /* Моноширинный шрифт */
font-size: 1.4em; /* Размер текста */
font-weight: bold; /* Жирный шрифт */
text-transform: uppercase; /* Все буквы заглавные */
}
</style>
</head>
<body>
<p><button class="btn">Кнопка</button></p>
</body>
</html>
Рамка
Для управления параметрами рамки применяется свойство border и его производные: border-width, border-style и border-color. В примере 4 класс .btn устанавливает основные параметры кнопки, в том числе толщину, стиль и цвет рамки. Для расширения набора кнопок в пример включены дополнительные классы, меняющие цвет рамки и текста. Таким образом, к <button> достаточно добавить класс .btn и класс с нужным цветом, например, .info.
Пример 4. Цветные рамки у кнопки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
.btn {
padding: 0.5em 1.5em; /* Поля по вертикали и горизонтали */
background-color: transparent; /* Прозрачный цвет фона */
font-size: 0.9em; /* Размер текста */
text-transform: uppercase; /* Все буквы заглавные */
color: #616161; /* Серый цвет текста */
border: 2px solid #616161; /* Параметры рамки */
margin-bottom: 1rem; /* Отступ снизу */
}
.btn.primary { border-color: #3f51b5; color: #3f51b5; }
.btn.success { border-color: #4cb050; color: #4cb050; }
.btn.info { border-color: #607d8b; color: #607d8b; }
.btn.warning { border-color: #ff9700; color: #ff9700; }
.btn.danger { border-color: #f44236; color: #f44236; }
</style>
</head>
<body>
<p>
<button class="btn">Кнопка</button>
<button class="btn primary">Основная кнопка</button>
<button class="btn success">Успех</button>
<button class="btn info">Информация</button>
<button class="btn warning">Предупреждение</button>
<button class="btn danger">Угроза</button>
</p>
</body>
</html>
Здесь используется набор кнопок с цветными рамками для различных ситуаций.
Скругление углов
За скругление уголков у рамок отвечает свойство border-radius, в качестве его значения указываются любые единицы размера из CSS, например, em, rem, пиксели, проценты и др. В примере 5 у кнопок радиус установлен как 0.4em.
Пример 5. Скруглённые уголки у кнопок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
.btn {
padding: 0.5em 1.5em; /* Поля по вертикали и горизонтали */
background-color: transparent; /* Прозрачный цвет фона */
font-size: 0.9em; /* Размер текста */
text-transform: uppercase; /* Все буквы заглавные */
color: #2196f3; /* Цвет текста */
border: 2px solid #2196f3; /* Параметры рамки */
border-radius: 0.4em; /* Радиус скругления */
}
</style>
</head>
<body>
<p><button class="btn">Основная кнопка</button></p>
</body>
</html>
Разные значения border-radius дают и различную форму кнопок. В табл. 1 приведён вид кнопок, получаемый в зависимости от радиуса скругления.
Табл. 1. Значения радиуса скругления
| Значение border-radius |
Описание |
Вид кнопки |
| 0.5em |
Такое значение устанавливает одинаковый радиус скругления у всех уголков кнопки. |
|
| 5em |
Любое большое значения радиуса, превышающее половину высоты кнопки, превращает кнопку в подобие пилюли. |
|
| 50% |
Процентная запись устанавливает разные значения радиуса по горизонтали и вертикали, поскольку проценты берутся отдельно от ширины и высоты кнопки. В итоге получается овальная кнопка. |
|
| 0.8em 0 0.8em 0 |
Четыре значения позволяют установить радиус каждого уголка кнопки независимо. Отсчёт начинается от левого верхнего угла и идёт по часовой стрелке. |
|
Фон
В примерах выше цвет фона делался прозрачным через свойство background-color со значением transparent. Аналогично устанавливается и произвольный цвет фона. Учтите, что у цветных кнопок сохраняется рамка по умолчанию, которая при желании убирается через свойство border-width или через свойство border-style со значением none. В примере 6 вводится несколько стилевых классов для кнопок, меняющих их цвет. К элементу <button> достаточно добавить класс .btn и одновременно класс с желаемым цветом фона, например, .success.
Пример 6. Использование background-color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
.btn {
padding: 0.5em 1.5em; /* Поля по вертикали и горизонтали */
background-color: #9e9e9e; /* Цвет фона */
color: #fff; /* Белый цвет текста */
font-size: 0.9em; /* Размер текста */
border-width: 0; /* Убираем рамку */
margin-bottom: 1rem; /* Отступ снизу */
}
.btn.primary { background-color: #3f51b5; }
.btn.success { background-color: #4cb050; }
.btn.info { background-color: #607d8b; }
.btn.warning { background-color: #ff9700; }
.btn.danger { background-color: #f44236; }
</style>
</head>
<body>
<p>
<button class="btn primary">Основная кнопка</button>
<button class="btn success">Успех</button>
<button class="btn info">Информация</button>
<button class="btn warning">Предупреждение</button>
<button class="btn danger">Угроза</button>
</p>
</body>
</html>
Здесь используется набор цветных кнопок для различных ситуаций.
Цветной фон допустимо комбинировать с цветной рамкой, получая разные вариации кнопок. В примере 7 рамка у кнопки сперва убирается, а затем к кнопке добавляется цветная линия снизу через свойство border-bottom.
Пример 7. Сочетание фона и линии
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
.btn {
padding: 0.5em 1.5em; /* Поля по вертикали и горизонтали */
font-size: 0.9em; /* Размер текста */
color: #fff; /* Белый цвет текста */
background-color: #67ada9; /* Цвет фона кнопки */
border-width: 0; /* Убираем рамку */
border-bottom: 4px solid #547b80; /* Линия снизу */
border-radius: 0.4em; /* Радиус скругления */
}
</style>
</head>
<body>
<p><button class="btn">Основная кнопка</button></p>
</body>
</html>
Градиентный фон
Вместо однотонного цветного фона для кнопок можно установить градиент через свойство background-image и функцию linear-gradient(). Например, для вертикального градиента от красного к синему цвету пишем следующее:
button { background-image: linear-gradient(red, blue); }
Для горизонтального градиента слева направо добавится ещё один параметр to right:
button { background-image: linear-gradient(to right, red, blue); }
Вместо названия цветов или шестнадцатеричных значений цвет удобно задавать в формате rgba(). Тогда оставляя цвет исходным мы только меняем значение прозрачности. Здесь вместо оранжевого цвета #f79103 используется его аналог rgb(247, 145, 3), для начального и конечного цветов задана прозрачность 0.2.
linear-gradient(
rgba(247, 145, 3, 0.2), rgb(247, 145, 3), rgba(247, 145, 3, 0.2)
);
В примере 8 представлены градиентные кнопки для разных ситуаций, цвет которых задан через rgba(). Для контрастного выделения кнопок к ним, также, добавлена рамка соответствующего цвета.
Пример 8. Градиентные кнопки
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
.btn {
padding: 0.5em 1.5em; /* Поля по вертикали и горизонтали */
background-image: linear-gradient(rgba(158,158,158,0.5), rgb(158,158,158), rgba(158,158,158,0.5)); /* Цвет фона */
color: #fff; /* Белый цвет текста */
font-size: 0.9em; /* Размер текста */
border: 2px solid rgb(158,158,158); /* Параметры рамки */
border-radius: 0.4em; /* Радиус скругления */
margin-bottom: 1rem; /* Отступ снизу */
}
.btn.primary { background-image: linear-gradient(rgba(63,81,181,0.5), rgb(63,81,181), rgba(63,81,181,0.5));
border-color: rgb(63,81,181); }
.btn.success { background-image: linear-gradient(rgba(76,176,80,0.5), rgb(76,176,80), rgba(76,176,80, 0.5));
border-color: rgb(76,176,80); }
.btn.info { background-image: linear-gradient(rgba(96,125,139,0.5), rgb(96,125,139), rgba(96,125,139,0.5));
border-color: rgb(96,125,139); }
.btn.warning { background-image: linear-gradient(rgba(255,151,0,0.5), rgb(255,151,0), rgba(255,151,0,0.5));
border-color: rgb(255,151,0); }
.btn.danger { background-image: linear-gradient(rgba(244,66,54,0.5), rgb(244,66,54), rgba(244,66,54,0.5));
border-color: rgb(244,66,54); }
</style>
</head>
<body>
<p>
<button class="btn">Кнопка</button>
<button class="btn primary">Основная кнопка</button>
<button class="btn success">Успех</button>
<button class="btn info">Информация</button>
<button class="btn warning">Предупреждение</button>
<button class="btn danger">Угроза</button>
</p>
</body>
</html>
Добавление тени
Как и к любому блоку, к <button> легко добавляется тень через свойство box-shadow. У него четыре основных параметра: первые два отвечают за смещение тени, третий устанавливает её размытие, а четвёртый цвет тени. Так, для создания равномерной полупрозрачной тени вокруг кнопки используем следующую запись.
button { box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); }
Для тени не вокруг кнопки, а внутри неё, добавляется параметр inset.
button { box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5); }
В примере 9 приведены несколько кнопок с разными параметрами box-shadow, дающими непохожие друг на друга тени.
Пример 9. Кнопки с тенью
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Кнопки</title>
<style>
.btn {
padding: 0.5em 1.5em; /* Поля по вертикали и горизонтали */
font-size: 0.9em; /* Размер текста */
color: #fff; /* Белый цвет текста */
background-color: #67ada9; /* Цвет фона кнопки */
border-width: 0; /* Убираем рамку */
border-radius: 0.4em; /* Радиус скругления */
margin-bottom: 1rem; /* Отступ снизу */
margin-right: 1rem; /* Отступ справа */
}
.s1 {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.8); /* Размытая тень */
}
.s2 {
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.8); /* Тень вправо-вниз */
}
.s3 {
box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8); /* Сплошная тень */
}
.s4 {
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.6); /* Внутренняя тень */
}
</style>
</head>
<body>
<p>
<button class="btn">Кнопка</button>
<button class="btn s1">Кнопка</button>
<button class="btn s2">Кнопка</button>
<button class="btn s3">Кнопка</button>
<button class="btn s4">Кнопка</button>
</p>
</body>
</html>
Генератор различных теней вы можете увидеть здесь: front-end-tools.com/en/generateboxshadow/
Итоги
- Ширина и высота кнопки устанавливаются непосредственно через свойства width и height. Также на размер влияет свойство padding, оно задаёт расстояние от текста до края кнопки.
- Параметры рамки меняются с помощью свойства border, которое определяет толщину, стиль и цвет линии. Для скругления уголков рамки добавляется свойство border-radius.
- Цвет фона кнопки задаётся через свойство background-color, для градиентного фона применяется свойство background-image с функцией linear-gradient().
- Тень к кнопке добавляется через свойство box-shadow.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 05.08.2023