Default/Secondary Button

You can either apply these styles for both <button> or <a> and still yield the same result. Happy styling!

I'm a link
<button class="btn">I'm a button</button>
<a href="javascript:void(0)" class="btn">I'm a link</a>
Different state

Normal State

Hover State

Active State

Please do not attempt to change the physical width and height values of buttons. Use .-large instead for bigger size buttons (see below).
Button line heights are always 1 or 100%. Font size should always be 12pt/px in Semibold.

Button Types
<!-- Primary Button -->
<button class="btn -primary">Primary button</button>

<!-- Success Button -->
<button class="btn -success">Success button</button>

<!-- Warning Button -->
<button class="btn -warning">Warning button</button>

<!-- Danger Button -->
<button class="btn -danger">Danger button</button>
Disabled Button
<!-- Disable by class -->
<button class="btn disabled">Disabled by class</button>

<!-- Disable by attribute -->
<button disabled class="btn">Disabled by attribute</button>

Adding .disabled to any .btn will make them appear disabled. It also works with the disabled attribute of <button>.

Non-Styling Buttons
<!-- The content could be text... -->
<button class="btn -plain">...</button>

<!-- ...or icon -->
<button class="btn -plain"><i class="icon -close"></i></button>

Non-styled buttons are not plain links. They basically have all the behaviours of a .btn class but without the decorative border, background-color and box-shadow.

Low Fidelity Buttons
<button class="btn-flat">Original</button>
<button class="btn-flat -primary">Complete</button>
<button class="btn-flat -success">Done</button>
<button class="btn-flat -warning">Take care, man!</button>
<button class="btn-flat -danger">Remove</button>

These low fidelity buttons are to be used in emails where there are limited styling capabilities.

Button with Icon
<button class="btn">
  <svg class="icon-svg">...</svg>
  This is a button

Icons to be used in button should be solid and modify `margin-right` independently for the best visualization. For a complete list of icon glyphs, please see Icon or _icon.scss

Button Size
<button class="btn">Default button</button>
<button class="btn -large">Large button</button>

Use class .-large to adjust button size. This could be applied to both .btn and .btn-flat.

Grouping Buttons

When there are two or more buttons being put together, wrap them with .btn-group for proper margins between these buttons.

<div class="btn-group">...</div>

Add class .-right if you want your group of buttons to be pushed right. This works with the help of flexbox.

<div class="btn-group -right">...</div>