Buttons

Basic

All button element types and input types of button, submit, reset can be styled as buttons by adding the class .button.

Non Button Types

Additionally so can anchor tags or anything else for that matter.

Coloured

You can apply additional styles to buttons by adding a further class. There are two created out of the box .button-primary and .button-secondary.

Outline Buttons

By adding the class .button-outline you can have a button with a transparent background. The text colour is the main colour of the button.

Clear Buttons

By adding the class .button-clear you can have a button with a transparent background and border. The text colour is the main colour of the button.

Additional Buttons

Additional colours can easily be added to your variables, you just need a name, colour and font color:

// as well as the default buttons the below will create a css helper for 
// "button-danger" that has red background and border with white text
$buttons: (
    // name         color                          font-color
    danger:         map-get($colors, "red")        map-get($colors, "white")
);