Buttons

Please note:

Buttons do not call this component directly as the abstraction would be overkill. Buttons should always look like these through a combination of the modifier classes detailed below and in buttons.sass

Colour variations

Standard button

<a class='btn btn--linkblue btn--medium' href='#'>Lonely</a>

Green button

<a class='btn btn--green btn--medium' href='#'>Register</a>

Red button

<a class='btn btn--medium btn--red' href='#'>Delete</a>

Yellow button

<a class='btn btn--medium btn--yella' href='#'>Book</a>

White button

<a class='btn btn--medium btn--white' href='#'>Change dates</a>

Dark Gray button

<a class='btn btn--darkgray btn--medium' href='#'>Load more</a>

Light Gray button

<a class='btn btn--lightgray btn--medium' href='#'>Load more</a>
Size and Style variations

small

<a class='btn btn--linkblue btn--small' href='#'>Submit</a>

medium

<a class='btn btn--linkblue btn--medium' href='#'>Submit</a>

large

<a class='btn btn--large btn--linkblue' href='#'>Submit</a>

x-large

<a class='btn btn--linkblue btn--x-large' href='#'>Submit</a>

outline

<a class='btn btn--medium btn--outline' href='#'>Submit</a>

is-disabled

<a class='btn btn--medium is-disabled' href='#'>Submit</a>

icon

<a class='btn btn--icon btn--linkblue btn--medium icon--globe--before icon--white--before' href='#'>Submit</a>

icon-only

<a class='btn btn--icon-only btn--linkblue btn--medium icon--globe icon--white' href='#'>Submit</a>

full-width

<a class='btn btn--full-width btn--linkblue' href='#'>Submit</a>
Social Media

Facebook

<a class='btn btn--facebook btn--medium btn--social-icon icon--facebook--before icon--white--before' href='#'>Facebook</a>

Google plus

<a class='btn btn--google-plus btn--medium btn--social-icon icon--google-plus--before icon--white--before' href='#'>Google plus</a>

Twitter

<a class='btn btn--medium btn--social-icon btn--twitter icon--twitter--before icon--white--before' href='#'>Twitter</a>

Pinterest

<a class='btn btn--medium btn--pinterest btn--social-icon icon--pinterest--before icon--white--before' href='#'>Pinterest</a>