Button group

Buttons can be in a parent with the .button-group class to create a button group.
Basically in a button group just, the first and last buttons have roundness and it seems like they are stick together.
If you don't know about buttons in FlatifyCSS, first read more about creating buttons.

Button groups can have both horizontal and vertical variations with different kinds of button styles.

Horizontal

By default, button groups are horizontal and they can have active buttons just by adding the .active class to each.

index.html

<div class="button-group">
  <button class="button">Click Here</button>
  <button class="button">Click Here</button>
  <button class="button active">Click Here</button>
</div>

Vertical

The vertical button group is possible by adding .vertical to the .button-group.

index.html

<div class="button-group vertical" style="width: 250px">
  <button class="button">Click Here</button>
  <button class="button style-success">Click Here</button>
  <button class="button style-info active">Click Here</button>
  <button class="button style-warning">Click Here</button>
  <button class="button style-danger">Click Here</button>
</div>

Sizes

To change the button group size use size setter classes. These classes just set a `font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<div class="button-group vertical size-2x" style="width: 250px">
  <button class="button">Click Here</button>
  <button class="button style-success">Click Here</button>
  <button class="button style-info">Click Here</button>
  <button class="button style-warning">Click Here</button>
  <button class="button style-danger">Click Here</button>
</div>