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>