Стилизация кнопок CSS
С помощью CSS HTML-кнопки могут выглядеть множеством разных способов.
Основную работу выполняют эти свойства:
background-color— заливает кнопку цветом фонаcolor— задаёт цвет текста кнопкиborder— рисует линию вокруг кнопкиpadding— управляет промежутком между текстом и рамкойborder-radius— скругляет углы кнопкиbox-shadow— добавляет кнопке теньtext-align— размещает текст кнопки по центруfont-size— управляет тем, насколько крупным выглядит текст кнопкиtext-decoration— убирает подчёркивание, когда элемент<a>выступает в роли кнопкиcursor— меняет курсор мыши, пока он находится над кнопкой
Обычно роль кнопки выполняют три элемента: <button>, <input type="button"> и <a>, стилизованный как кнопка.
Базовая стилизация кнопок CSS
Любой HTML-элемент может выглядеть как кнопка, если задать ему несколько свойств CSS: цвет фона, немного отступов, цвет текста и отсутствие рамки по умолчанию.
Пример
Базовая стилизация кнопок на разных HTML-элементах:
Prompt
Создай страницу, показывающую обычную кнопку без стилей и CSS-стилизованную кнопку рядом друг с другом. Стилизованная кнопка должна иметь красный фон, белый текст, без границы, отступ 15px 32px, центрированный текст, без подчёркивания, display inline-block, размер шрифта 16px и курсор pointer. Используй элемент для обычной кнопки и элемент для стилизованной.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: red;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>CSS Styling Buttons</h2>
<button>Default Button</button>
<a href="#" class="button">CSS Button</a>
</body>
</html>
Цвета кнопок CSS
Цветом здесь управляют два свойства: background-color для того, что находится за текстом, и color для самого текста.
Пример
У каждой кнопки здесь свой цвет фона:
Prompt
Создай страницу с пятью кнопками в ряд, каждая с разным цветом фона: зелёная (#04AA6D), синяя (#008CBA), красная (#f44336), серая (#e7e7e7 с чёрным текстом) и чёрная (#555555). У всех кнопок базовый стиль с белым текстом, без границы, отступом 15px 32px, центрированным текстом, размером шрифта 16px и курсором pointer.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button2 {background-color: #008CBA;}
.button3 {background-color: #f44336;}
.button4 {background-color: #e7e7e7; color: black;}
.button5 {background-color: #555555;}
</style>
</head>
<body>
<h2>Button Colors</h2>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
Размеры кнопок CSS
Размер определяют два свойства. font-size масштабирует текст на кнопке, а padding регулирует, сколько места остаётся между этим текстом и рамкой.
Кнопки с разным размером шрифта
Размер шрифта меняется от кнопки к кнопке:
Prompt
Создай страницу с пятью кнопками, показывающими разные размеры шрифта: 10px, 12px, 16px, 20px и 24px. У всех кнопок базовый стиль с зелёным фоном (#04AA6D), белым текстом, без границы, отступом 15px 32px, центрированным текстом и курсором pointer.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h2>Button Sizes</h2>
<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>
</body>
</html>
Кнопки с разными отступами
Здесь различается значение отступов:
Prompt
Создай страницу с пятью кнопками, показывающими разные значения отступов (padding): 10px 24px, 12px 28px, 14px 40px, 32px 16px и 16px. У всех кнопок базовый стиль с зелёным фоном (#04AA6D), белым текстом, без границы, центрированным текстом, размером шрифта 16px и курсором pointer.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
</style>
</head>
<body>
<h2>Button Padding</h2>
<button class="button button1">10px 24px</button>
<button class="button button2">12px 28px</button>
<button class="button button3">14px 40px</button>
<button class="button button4">32px 16px</button>
<button class="button button5">16px</button>
</body>
</html>
Скруглённые кнопки CSS
Используйте border-radius, чтобы скруглить углы кнопки.
Пример
Углы, скруглённые в разной степени:
Prompt
Создай страницу с пятью кнопками, показывающими разные значения border-radius: 2px, 4px, 8px, 12px и 50%. У всех кнопок базовый стиль с зелёным фоном (#04AA6D), белым текстом, без границы, отступом 15px 32px, центрированным текстом, размером шрифта 16px и курсором pointer.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>
<h2>Rounded Buttons</h2>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>
</body>
</html>
Рамки кнопок CSS
Рамку кнопки задаёт свойство border.
Пример
Стиль рамки меняется от кнопки к кнопке:
Prompt
Создай страницу с пятью кнопками, показывающими разные стили границ: 2px сплошная зелёная (#04AA6D), 2px пунктирная синяя (#008CBA), 2px штриховая красная (#f44336), 1px сплошная серая (#e7e7e7) и 1px сплошная тёмно-серая (#555555). У всех кнопок базовый стиль с белым фоном, текстом того же цвета, что и граница, отступом 15px 32px, центрированным текстом, размером шрифта 16px и курсором pointer.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
background-color: white;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
.button1 {border: 2px solid #04AA6D; color: #04AA6D;}
.button2 {border: 2px dotted #008CBA; color: #008CBA;}
.button3 {border: 2px dashed #f44336; color: #f44336;}
.button4 {border: 1px solid #e7e7e7; color: black;}
.button5 {border: 1px solid #555555; color: #555555;}
</style>
</head>
<body>
<h2>Button Borders</h2>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>