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:

<button type="button" class="btn">Button</button> <button type="button" class="btn">Button</button> <button type="button" class="btn">Button</button> <button type="button" class="btn">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

Use the border property to create a bordered button group:

<button type="button" class="btn" style="border: 1px solid green;">Button</button> <button type="button" class="btn" style="border: 1px solid green;border-left:none;">Button</button> <button type="button" class="btn" style="border: 1px solid green;border-left:none;">Button</button> <button type="button" class="btn" style="border: 1px solid green;border-left:none;">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 type="button" class="btn" style="border: 1px solid green;width:150px;border-bottom:none;margin:0">Button</button> <button type="button" class="btn" style="border: 1px solid green;width:150px;border-bottom:none;margin:0">Button</button> <button type="button" class="btn" style="border: 1px solid green;width:150px;border-bottom:none;margin:0">Button</button> <button type="button" class="btn" style="border: 1px solid green;width:150px;margin:0">Button</button>

Example

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

CSS Animated Buttons

Example

Add an arrow on hover:

<button class="button" style="vertical-align:middle;width:180px;">Hover </button>

Example

Add a "pressed" effect on click:

<button class="pressed" style="margin:5px;width:180px;"> Click </button>

Example

Fade in on hover:

<button class="btnfade" style="width:180px;"> Fade In </button>

Example

Add a "ripple" effect on click:

<button class="rippleripple" style="width:180px;"> Click </button>