Buttons
Default/Secondary Button
You can either apply these styles for both <button> or <a> and still yield the same result. Happy styling!
<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
</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>