CSS Button Groups
This page covers CSS button groups and animated buttons.
CSS Horizontal Button Group
To create a group of buttons side by side, wrap them in a container element and set display: flex; on it. Add flex-wrap: wrap; so the buttons move to a new line on small screens.
Example
A horizontal button group using flexbox. The buttons change to dodgerblue on hover.
Prompt
Create a horizontal button group using CSS flexbox. Place four green buttons side by side inside a flex container with flex-wrap enabled. On hover, the buttons should change to 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 Bordered Button Group
Use the border property to add borders to the buttons. To make them look like one connected group, remove the right border from all buttons except the last one using the :not(:last-child) selector.
Example
Prompt
Create a horizontal group of four bordered buttons with a 1px solid green border. Remove the right border from all buttons except the last one using the :not(:last-child) selector, so they appear as one connected group. On hover, change the background color.
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 Vertical Button Group
To create a vertical button group, wrap the buttons in a container and set display: flex; with flex-direction: column;. This stacks the buttons on top of each other.
Example
Prompt
Create a vertical button group using CSS flexbox with flex-direction set to column. Display four green buttons stacked on top of each other. On hover, the buttons should change to 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 Animated Buttons
You can add animations and transition effects to buttons using CSS.
Arrow on hover
Add an arrow that slides in when you hover over the button.
Prompt
Create a button that shows an arrow (») sliding in from the right on hover. Use a span inside the button for the arrow, with CSS transitions for opacity and padding to animate the effect.
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>
Pressed effect
Add a "pressed" effect when the button is clicked.
Prompt
Create a button with a "pressed" effect on click using CSS. The button should have a box-shadow and when clicked (:active), the shadow is removed and the button moves down slightly using 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>
Fade in on hover
Make the button fade in when you hover over it.
Prompt
Create a button that fades in on hover. Start with the button at half opacity (0.5) and transition to full opacity (1) on hover using a CSS transition.
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>
Ripple effect
Add a "ripple" effect when the button is clicked.
Prompt
Create a button with a CSS ripple effect on click. Use a ::after pseudo-element with a radial-gradient background and a CSS animation that scales up and fades out when the button is clicked.
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>