Buttons are for call to action items or methods.
You can create a button in two ways: with the button element or by adding the .button class to an a tag.
<a class="button">Default Button</a>
<a class="button button-light">Light Button</a>
<a class="button button-dark">Dark Button</a>
<a class="button button-ghost">Ghost Button</a>
<a class="button button-disabled">Disabled</a>
<a class="button button-primary">Primary Button</a>
<a class="button button-complement">Complement Button</a>
<a class="button button-tetrad">Tetrad Button</a>
<a class="button button-secondary">Secondary Button</a>
<a class="button button-tertiary">Tertiary Button</a>
<a class="button button-link">Button Link</a>
Variation of button style.
<a class="button button-outline">Default Button</a>
<a class="button button-light button-outline">Light Button</a>
<a class="button button-dark button-outline">Dark Button</a>
<a class="button button-ghost button-outline">Ghost Button</a>
<a class="button button-disabled button-outline">Disabled</a>
<a class="button button-primary button-outline">Primary Button</a>
<a class="button button-complement button-outline">Complement Button</a>
<a class="button button-tetrad button-outline">Tetrad Button</a>
<a class="button button-secondary button-outline">Secondary Button</a>
<a class="button button-tertiary button-outline">Tertiary Button</a>
Buttons can be rendered in different sizes.
They also support responsive states similar to the grid system. .button-large-phone
<div class="button button-light button-full-width">Full-width Button</div>
<div class="button button-light button-largest">Largest Button</div>
<div class="button button-light button-large">Large Button</div>
<div class="button button-light">Default Button</div>
<div class="button button-light button-small">Small Button</div>
<div class="button button-light button-smallest">Smallest Button</div>