Buttons

Arugably the most important part of a CSS Toolkit.

Default Button

<p><a class="btn" href="#">Default Button</a></p>

Primary Button

<p><a class="btn btn-primary" href="#">Primary Button</a></p>

Secondary Button

<p><a class="btn btn-secondary" href="#">Secondary Button</a></p>

Tertiary Button

<p><a class="btn btn-tertiary" href="#">Tertiary Button</a></p>

Outline Button

<p><a class="btn btn-outline" href="#">Outline Button</a></p>

Disabled Button

<p><a class="btn btn-disabled" href="#">Disabled Button</a></p>

Images

You can use SVG icons to add images inside of buttons.

Object

<p><a class="btn" href="#"><object data="https://www.inktweb.nl/images/svg/icon-star-full.svg" type="image/svg+xml" title="Ster icoon gevuld">Ster</object>Object</a></p>

Direct SVG

<p><a class="btn" href="#"><svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 100 100"><path d="M50 2.002l16.478 29.854 33.515 6.43-23.33 24.884 4.235 33.828L50 82.52 19.102 97l4.234-33.828L.006 38.287l33.515-6.43L50 2"></path></svg>Direct SVG</a></p>

Using a SVG directly applies a fill with $color-text

Sizing

You can control the size of a button with the following classes.

Large button

<p><a class="btn btn-lg" href="#">Large button</a></p>

Smaller button

<p><a class="btn btn-sm" href="#">Smaller button</a></p>

Block button

<p><a class="btn btn-block" href="#">Block button</a></p>