Buttons

Buttons can be used either as <button> elements or as <a> elements with the class .btn. Apart from the stadnard size, all buttons have a small vresion, which can be used with the addition of the .btn-small class.

Default buttons

The default buttons are subtle and should be used for secondary actions. However, they can get more attention when used on dark backgrounds.

<button type="button">
    <span>Default button</span>
</button>
<a href="#" class="btn">
    <span>Default button (anchor)</span>
</a>
<button type="button" class="btn-small">
    <span>Default button small</span>
</button>

Primary buttons

When there is need for a Call-To-Action, the primary button should be used.

<button type="button" class="btn-primary">
    <span>Primary button</span>
</button>
<a href="#" class="btn btn-primary">
    <span>Primary button (anchor)</span>
</a>
<button type="button" class="btn-primary btn-small">
    <span>Primary button small</span>
</button>

Secondary buttons

Buttons are also available in the brand color and accents 1 and 2. These have a more minimal look than a primary button but they still are prominent in the GUI. Again, they are also available in the form of <a class="btn"> and in a small vresion with the addition of the class .btn-small.

<button type="button" class="btn-brand">
    <span>Brand button</span>
</button>
<button type="button" class="btn btn-acc1">
    <span>Accent1 button</span>
</button>
<button type="button" class="btn-acc2">
    <span>Accent2 button</span>
</button>
<button type="button" class="btn-bg-shade3">
    <span>Shade3 button</span>
</button>

Outline buttons

Outline buttons are another alternative for secondary actions and should only be used on dark backgrounds.

<button type="button" class="btn-outline">
    <span>Outline button</span>
</button>
<a href="#" class="btn btn-outline">
    <span>Outline button (anchor)</span>
</a>
<button type="button" class="btn-outline btn-small">
    <span>Outline button small</span>
</button>

Links

The styles for a link can be accessed either by using a simple <a> html element, or by using a <button> elements with the class .btn-link. The link button version (<button class="btn-link">) takes the exact same space as the buttons, so it can be easily used in a row with other buttons.

<a href="#">
    <span>Simple anchor link</span>
</a>
<button type="button" class="btn-link">
    <span>Link button</span>
</button>