Default button

button

  <a href="#" class="button"> button </a>

Primary button

primary button

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

Button hovered

Buttons will have a dropdown shadow when hovered.

button hovered button hovered

  .button:hover

  <a href="#" class="button hover"> button hovered </a>

Active button

Buttons will appear pressed (with an inset shadow) when active.

active button active button

  .button:active

  <a href="#" class="button"> active button </a>

Disabled button

disabled button

  <a href="#" class="button" disabled="disabled"> disabled button </a>

Block button

Block buttons span the full width of a parent element block button

  <a href="#" class="button btn-block"> block button </a>

Small button

small button

  <a href="#" class="button btn-s"> small button </a>

Large button

large button

  <a href="#" class="button btn-l"> large button </a>

Button icon

Buttons can be combined with any icon. Icons should be placed inside the button as an <i>

login subscribe

  <a href="#" class="button">
    <i class="icon-login"></i>
    login
  </a>

Small icon - no text

Buttons with no text and small, used in interface

  <a href="#" class="button btn-s">
    <i class="icon-check"></i>
  </a>
  <a href="#" class="button btn-s">
    <i class="icon-cancel"></i>
  </a>