Buttons render easily as objects inline with other elements. When you have a group of buttons, use the .button-collection element to wrap a set of buttons. A button collection defines simple rules governing the space between buttons both horizontally and vertically.

<!-- Button: Collection -->
<div class="button-collection">
  <a href="#" class="button button-primary">
    Primary Button
  </a>
  <a href="#" class="button">
    Button
  </a>
</div>

Vertical Alignment

When you have buttons of different sizes in the same .button-collection, you can use the button alignment properties .button-collection-align-top, .button-collection-align-middle, and .button-collection-align-bottom to position them along the top, middle, or baseline axis.

<!-- Button Collection: Align Top-->
<div class="button-collection button-collection-align-vertical-top">
  …
</div>

<!-- Button Collection: Align Middle-->
<div class="button-collection button-collection-align-vertical-middle">
  …
</div>

<!-- Button Collection: Align Bottom-->
<div class="button-collection button-collection-align-vertical-bottom">
  …
</div>