Buttons

Buttons are essential web elements for interaction.

Code

Types

There are 3 different types of button.

• .btn--flat
• .btn--float
• .btn--raised

Colors

By default, the flat and the raised buttons are the $primary variable color and the floating button is the $accent variable. If you want a specific color, there are 7 different colors.

• .btn--red
• .btn--yellow
• .btn--green
• .btn--blue
• .btn--primary
• .btn--secondary
• .btn--accent

				
<button class="btn--flat">Flat</button>
<button class="btn--float">+</button>
<button class="btn--raised">Raised</button>

<button class="btn--raised btn--green">Green</button>
<button class="btn--raised btn--blue">Blue</button>
<button class="btn--raised btn--accent">Accent</button>