Эффекты наведения на кнопки CSS
Помимо эффектов наведения, на этой странице также рассматриваются тени кнопок, отключённые состояния и ширина.
Кнопки с наведением CSS
Когда вы наводите курсор мыши на кнопку, её стиль можно изменить с помощью псевдокласса :hover.
Совет: скорость этого изменения зависит от свойства transition-duration.
Пример
Каждая кнопка здесь плавно меняет цвет на новый при наведении.
Prompt
Создай страницу с пятью кнопками (Зелёная, Синяя, Красная, Серая, Чёрная), которые меняют цвет фона при наведении. Используй CSS-свойство transition-duration, установленное на 0.4s, для плавного эффекта при наведении.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hoverable Buttons</title>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.green:hover { background-color: #4CAF50; color: white; }
.blue { border-color: #008CBA; }
.blue:hover { background-color: #008CBA; color: white; }
.red { border-color: #f44336; }
.red:hover { background-color: #f44336; color: white; }
.grey { border-color: #e7e7e7; }
.grey:hover { background-color: #e7e7e7; }
.black { border-color: #555555; }
.black:hover { background-color: #555555; color: white; }
</style>
</head>
<body>
<h2>Hoverable Buttons</h2>
<button class="button green">Green</button>
<button class="button blue">Blue</button>
<button class="button red">Red</button>
<button class="button grey">Grey</button>
<button class="button black">Black</button>
</body>
</html>
Кнопки CSS с тенью
Тени кнопок создаются свойством box-shadow.
Пример
Из этих двух кнопок одна имеет постоянную тень, а другая получает её только при наведении.
Prompt
Создай страницу с двумя кнопками: одна с постоянной box-shadow, а другая показывает box-shadow только при наведении. Используй rgba(0,0,0,0.6) для цвета тени.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons With Shadow</title>
<style>
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; margin: 4px 2px; cursor: pointer; }
.button1 { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6); }
.button2:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6); }
</style>
</head>
<body>
<h2>Buttons With Shadow</h2>
<button class="button button1">Shadow Button</button>
<button class="button button2">Shadow on hover</button>
</body>
</html>
Отключённая кнопка CSS
Если уменьшить opacity, кнопка выглядит частично прозрачной, и такой вид воспринимается как «отключённая».
Совет: при наведении на кнопку появляется знак «парковка запрещена», если вы также зададите для cursor значение not-allowed.
Пример
Здесь opacity и cursor вместе придают кнопке вид отключённой.
Prompt
Создай страницу с обычной кнопкой и кнопкой, выглядящей отключённой. Отключённая кнопка должна использовать opacity 0.6 и cursor not-allowed, чтобы показать, что на неё нельзя нажать.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button</title>
<style>
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; cursor: pointer; }
.disabled { opacity: 0.6; cursor: not-allowed; }
</style>
</head>
<body>
<h2>Disabled Button</h2>
<button class="button">Normal Button</button>
<button class="button disabled">Disabled Button</button>
</body>
</html>
Ширина кнопки CSS
Обычно размер кнопки зависит от её текста. Чтобы выбрать конкретную ширину, задайте свойство width.
Совет: процент, например 50% от родительского элемента, делает ширину адаптивной, а пиксели делают её фиксированной.
Пример
Три ширины кнопок для сравнения: 250px, 50% и 100%.
Prompt
Создай страницу с тремя кнопками, расположенными вертикально, каждая с разной шириной: 250px, 50% и 100%. Покажи, как CSS-свойство width управляет размером кнопки.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Width</title>
<style>
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; margin: 4px 0; cursor: pointer; display: block; }
.button1 { width: 250px; }
.button2 { width: 50%; }
.button3 { width: 100%; }
</style>
</head>
<body>
<h2>Button Width</h2>
<button class="button button1">250px</button>
<button class="button button2">50%</button>
<button class="button button3">100%</button>
</body>
</html>
Кнопка на изображении
Пример
Позиционирование CSS размещает эту кнопку поверх изображения.
Prompt
Создай страницу с контейнером, содержащим изображение и центрированную кнопку, наложенную поверх него. Используй CSS-позиционирование, чтобы разместить кнопку в середине изображения.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button on Image</title>
<style>
.container { position: relative; width: 100%; max-width: 400px; }
.container img { width: 100%; height: auto; }
.btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #4CAF50; color: white; font-size: 16px; padding: 12px 24px; border: none; cursor: pointer; border-radius: 5px; }
.btn:hover { background-color: #46a049; }
</style>
</head>
<body>
<h2>Button on Image</h2>
<div class="container">
<img src="img_snow.jpg" alt="Snow">
<button class="btn">Button</button>
</div>
</body>
</html>