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>
CTA's

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>