CSS Button Groups
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
.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;
}
Try it Yourself »
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;
}
CSS Bordered Button Group
Use the border property to create a bordered button
group:
Example
.button {
border: 1px solid green;
}
.btn-group .button:not(:last-child) {
border-right: none;
}
Try it Yourself »
border: 1px solid green;
}
.btn-group .button:not(:last-child) {
border-right: none;
}
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: