CSS Button Groups

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:

Button

Button

Button

Button

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;
}

CSS Bordered Button Group

Button

Button

Button

Button

Example.button {
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:

Button

Button

Button

Button

Example.btn-group {
display: flex;
flex-direction: column;
}

CSS Animated Buttons

Example

Add an arrow on hover:

Hover

Example

Click

Example

Fade in on hover: