Buttons -

Buttons

A button is a required function to perform or complete an action.

For the purposes of consistency, buttons and links can be styled to look identical.

Link Link

<a href="" class="btn button-primary mobile-full">Link</a>

<button class="btn button-primary mobile-full" type="button">Button</button>

<button class="btn button-primary mobile-full progression active" type="button"><i class="fa fa-circle-o-notch"></i> Button w/Icon</button>

<a href="" class="btn mobile-full">Link</a>

Button Types

Error Success Info Dark Disabled

<a href="" class="btn btn-error mobile-full">Error</a>

<a href="" class="btn btn-success mobile-full">Success</a>

<a href="" class="btn btn-info mobile-full">Info</a>

<a href="" class="btn btn-black mobile-full">Dark</a>

<a href="" class="btn button-primary js-disabled mobile-full">Disabled</a>

Button Sizes

Extra Large Large Default Small

<a href="" class="btn button-primary btn-xl mobile-full">Extra Large</a>

<a href="" class="btn button-primary btn-lg mobile-full">Large</a>

<a href="" class="btn button-primary mobile-full">Default</a>

<a href="" class="btn button-primary btn-sm mobile-full">Small</a>

Button Bar

<div class="button-bar">
  <button class="btn button-bar-item">
    One
  </button>
  <button class="btn button-bar-item">
    Two
  </button>
  <button class="btn button-bar-item">
    Three
  </button>
</div>

CTA's

Isolate

A CTA is specifically an encouragement of behavior by the user

Download This Thing

<a href="" class="cta cta-primary mobile-full">Download This Thing <i class="fa fa-download"></i></a>