This page covers CSS button groups and animated buttons.
CSS Horizontal Button Group
To create a group of buttons, wrap the buttons in a <div> element, and add display: flex; to the <div> element. Also add flex-wrap: wrap; , to let the buttons wrap on a new line on small screens:
Example
Formatted code
.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;
}Live preview
CSS Bordered Button Group
Use the border property to create a bordered button group:
Example
Formatted code
.button {
border: 1px solid green;
} .btn-group .button:not(:last-child) {
border-right: none;
}Live preview
CSS Vertical Button Group
To create a vertical button group, wrap the buttons in a <div> element, and add display: flex; to the <div> element. Also add flex-direction: column; , to let the buttons be displayed in a vertical way:
Example
Formatted code
.btn-group {
display: flex;
flex-direction: column;
}Live preview
CSS Animated Buttons
Example
Add a "pressed" effect on click:
Example
Add a "ripple" effect on click: