Buttons

Basic use for Buttons with a few classes.

Variables

Name Type Value
$button-first-radius radius $radius 0 0 $radius
$button-last-radius radius 0 $radius $radius 0
$vertical-button-first-radius radius $radius $radius 0 0
$vertical-button-last-radius radius 0 0 $radius $radius
$button-background-selected color darken($gray-200, 10%)

Button group

<div class="button-group">
  <button>Left</button>
  <button>Middle</button>
  <button>Right</button>
</div>
<div class="button-group">
  <button>Left</button>
  <button class="selected">Middle</button>
  <button>Right</button>
</div>

Button group vertical

<div class="button-group-vertical">
  <button>Left</button>
  <button>Middle</button>
  <button>Right</button>
</div>
<div class="button-group-vertical">
  <button class="selected">Left</button>
  <button>Middle</button>
  <button>Right</button>
</div>