1.1 Classy Buttons

Classy buttons are big clickable buttons, great for form actions and primary page actions. This is used extensively around the site.

  • :hover - Buttons when hover
  • :disabled - Buttons when disabled
  • .disabled - The same as :disabled
Button (a.button-classy)
:hover Button (a.button-classy)
:disabled Button (a.button-classy)
.disabled Button (a.button-classy)
<button class="classy {{modifier}}">Button (button.classy)</button>
<a href="#" class="button-classy {{modifier}}">Button (a.button-classy)</a>

1.2 Primary Buttons

Primary buttons are designed for the main form action, use whenever creating something.

  • :hover - Buttons when hover
Button (a.button-primary)
:hover Button (a.button-primary)
<button class="primary {{modifier}}">Button (button.primary)</button>
<a href="#" class="button-primary {{modifier}}">Button (a.button-primary)</a>