Buttons

Button elements are used primarily for actions such as “Submit”, “Close” or “Download”. Links can be styled like buttons, using the following classes below, but they should be visually differentiated from buttons. For example, good practice would be adding an icon to the styled link.

Primary Buttons

<button class="button button-primary">Primary Button</button>
<button class="button button-small">Small Button</button>

Buttons with Icons

<button class="button button-primary">Button Primary<i class="icon-right icon-chevron-right-skinny" aria-hidden="true"></i></button>
<button class="button button-small">Button Small<i class="icon-right icon-arrow-right-skinny" aria-hidden="true"></i></button>

Button Variants

Inverse button for use on dark backgrounds.

<button class="button button-inverse">Button Inverse</button>
<button class="button button-small-inverse">Button Small Inverse</button>