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
<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>
<a class='btn btn--medium btn--social-icon btn--twitter icon--twitter--before icon--white--before' href='#'>Twitter</a>
<a class='btn btn--medium btn--pinterest btn--social-icon icon--pinterest--before icon--white--before' href='#'>Pinterest</a>