Styleguides

Shared Assets & Docs

Menu

Add a .button class to <a>, <input>, and <button> tags to make some pretty awesome looking buttons.

<a> Button

Buttons Button in the middle of a paragraph.

Disabled 

<a href="#" class="button">Button</a>
<button class="button">Button</button>
<input type="submit" class="button" value="Button">

Sizes

There are two other sizes for buttons, .small-button and .big-button. You may also expand a button to fill its container using .full-button

<a href="#" class="button small-button">Button</a>
<a href="#" class="button">Button</a>
<a href="#" class="button big-button">Button</a>
<a href="#" class="button full-button">Button</a>

Colors

There are two other colors for buttons, .primary-button and .alert-button.

<a href="#" class="button">Button</a>
<a href="#" class="button primary-button">Button</a>
<a href="#" class="button alert-button">Button</a>

Icons

You can use icons like you normally would within a button. You can also add .icon-button to make an icon-only button. Always pair it with a Tooltip for some indication of what it does.

<a href="#" data-tooltip="View" class="button icon-button"><i class="icon-eye"></i><span>View</span></a>

Disable After Click

To prevent multiple accidental form submissions, add the data-disable-with attribute. Once the button is clicked, it will automatically be disabled.

<form>
  <button class="button" data-disable-with="Submitting...">Submit</button>
</form>

Button List

Add a .button-list class to <ul>s and <ol>s to create a Button List.

<ul class="button-list">
  <li><a href="#" class="button">Button</a></li>
  ...
</ul>