Buttons

Without styles

Typically, you may want to style link, input and button elements as buttons. This is how they look like in your browser natively.

<a href="#">Link</a>
<input type="button" value="Input">
<button type="button">Button</button>
<button type="submit">Submit button</button>

Default styles

<a href="#" class="button button-default">Link</a>
<input type="button" value="Input" class="button button-default">
<button type="button" class="button button-default">Button</button>
<button type="submit" class="button button-default">Submit button</button>

Style variants

<a href="#" class="button button-primary">Primary</a>
<input type="button" value="Success" class="button button-success">
<button type="button" class="button button-warning">Warning</button>
<button type="submit" class="button button-danger">Danger</button>

Outline buttons

Outline buttons as made popular by iOS are flat buttons with high contrast and transparent backgrounds.

<a href="#" class="button button-outline-primary">Primary</a>
<input type="button" value="Success" class="button button-outline-success">
<button type="button" class="button button-outline-warning">Warning</button>
<button type="submit" class="button button-outline-danger">Danger</button>

Therefore, outline buttons look great on top of backgrounds with images or gradients.

Pilled buttons

<a href="#" class="button button-primary button-pilled">Primary</a>
<input type="button" value="Success" class="button button-success button-pilled">
<button type="button" class="button button-warning button-pilled">Warning</button>
<button type="submit" class="button button-danger button-pilled">Danger</button>

Block buttons

Block buttons are block level elements and span to the full width available. If multiple block buttons are stacked over another (like below), a little margin is used as a spacer.

<button type="button" class="button button-default button-block">Block button</button>

Link Button Submit button

Button sizes

<button type="button" class="button button-default button-small">Small button</button>
<button type="button" class="button button-default">Standard button</button>
<button type="button" class="button button-default">Large button</button>

Button groups

<div class="button-group">
  <button type="button" class="button button-default">First</button>
  <button type="button" class="button button-default">Second</button>
  <button type="button" class="button button-default">Third</button>
</div>