Группы кнопок CSS
На этой странице рассматриваются группы кнопок CSS и анимированные кнопки.
Горизонтальная группа кнопок CSS
Чтобы создать группу кнопок, расположенных рядом друг с другом, оберните их в элемент-контейнер и задайте для него display: flex;. Добавьте flex-wrap: wrap;, чтобы кнопки переходили на новую строку на маленьких экранах.
Пример
Горизонтальная группа кнопок с использованием flexbox. При наведении кнопки меняют цвет на dodgerblue.
Prompt
Создай горизонтальную группу кнопок с помощью CSS flexbox. Размести четыре зелёные кнопки рядом друг с другом во флекс-контейнере с включённым flex-wrap. При наведении кнопки должны становиться цвета dodgerblue.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn-group {
display: flex;
flex-wrap: wrap;
}
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:hover {
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Horizontal Button Group</h2>
<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>
</body>
</html>
Группа кнопок с рамкой в CSS
Используйте свойство border, чтобы добавить рамки кнопкам. Чтобы они выглядели как одна соединённая группа, уберите правую рамку у всех кнопок, кроме последней, с помощью селектора :not(:last-child).
Пример
Prompt
Создай горизонтальную группу из четырёх кнопок с границей, со сплошной зелёной границей 1px. Убери правую границу у всех кнопок, кроме последней, используя селектор :not(:last-child), чтобы они выглядели как одна связанная группа. При наведении меняй цвет фона.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn-group {
display: flex;
flex-wrap: wrap;
}
.button {
background-color: #04AA6D;
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:not(:last-child) {
border-right: none;
}
.btn-group .button:hover {
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Bordered Button Group</h2>
<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>
</body>
</html>
Вертикальная группа кнопок CSS
Чтобы создать вертикальную группу кнопок, оберните кнопки в контейнер и задайте display: flex; вместе с flex-direction: column;. Это расположит кнопки друг над другом.
Пример
Prompt
Создай вертикальную группу кнопок с помощью CSS flexbox с flex-direction, установленным на column. Отобрази четыре зелёные кнопки, расположенные друг над другом. При наведении кнопки должны становиться цвета dodgerblue.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn-group {
display: flex;
flex-direction: column;
}
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:hover {
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Vertical Button Group</h2>
<div class="btn-group" style="width: 200px;">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>
</body>
</html>
Анимированные кнопки CSS
С помощью CSS можно добавлять кнопкам анимации и эффекты переходов.
Стрелка при наведении
Добавьте стрелку, которая появляется при наведении на кнопку.
Prompt
Создай кнопку, показывающую стрелку (»), выезжающую справа при наведении. Используй span внутри кнопки для стрелки, с CSS-переходами для прозрачности и отступа, чтобы анимировать эффект.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
display: inline-block;
border-radius: 4px;
background-color: #04AA6D;
border: none;
color: white;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body>
<h2>Animated Button - Arrow on Hover</h2>
<button class="button"><span>Hover </span></button>
</body>
</html>
Эффект нажатия
Добавьте эффект «нажатия» при клике по кнопке.
Prompt
Создай кнопку с эффектом "нажатия" при клике с помощью CSS. У кнопки должна быть box-shadow, а при клике (:active) тень убирается, и кнопка немного смещается вниз с помощью transform: translateY(4px).
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: white;
background-color: #04AA6D;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {
background-color: #048a5a;
}
.button:active {
background-color: #048a5a;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>
<h2>Animated Button - Pressed Effect</h2>
<button class="button">Click</button>
</body>
</html>
Появление при наведении
Сделайте так, чтобы кнопка плавно появлялась при наведении на неё.
Prompt
Создай кнопку, которая плавно появляется при наведении. Начни с кнопки с половинной прозрачностью (0.5) и переходи к полной непрозрачности (1) при наведении, используя CSS-переход.
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: 16px 32px;
text-align: center;
font-size: 16px;
cursor: pointer;
opacity: 0.5;
transition: 0.3s;
}
.button:hover {
opacity: 1;
}
</style>
</head>
<body>
<h2>Animated Button - Fade In on Hover</h2>
<button class="button">Fade In</button>
</body>
</html>
Эффект ряби
Добавьте эффект «ряби» при клике по кнопке.
Prompt
Создай кнопку с CSS-эффектом ряби (ripple) при клике. Используй псевдоэлемент ::after с фоном radial-gradient и CSS-анимацию, которая увеличивается и постепенно исчезает при клике на кнопку.
Output: complete HTML page "}, {
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.button {
position: relative;
background-color: #04AA6D;
border: none;
font-size: 28px;
color: white;
padding: 20px;
width: 200px;
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: "";
background: #f1f1f1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}
</style>
</head>
<body>
<h2>Animated Button - Ripple Effect</h2>
<button class="button">Click</button>
</body>
</html>