Button

Regular Button

<button class="btn">Click Me</button>

Primary buttons have blue color instead of the default grey.

<button class="btn primary">Click Me</button>

Danger buttons have red color instead of the default grey.

<button class="btn danger">Click Me</button>

Falt buttons do not have any background color, only when hovered over their background color changes to grey.

<button class="btn flat">Click Me</button>

Pill buttons have a very high border radius, when there's no text inside them they appear as circles.

<button class="btn pill">Click Me</button>

Circualr buttons are always circles of a fixed width and height. Those can be scaled up and down by adjusting the font size.

<button class="btn circular">x</button>

Square buttons are always squares of a fixed width and height. Those can be scaled up and down by adjusting the font size.

<button class="btn square">...</button>

When a button is togglable (similarly to a checkbox), toggled class can be used to highlight that button.

<button class="btn toggled">Click Me</button>

adaptive - changes the background color of regular button to a semi-transparent color that better adapts to different background colors
btn-wrapper - a container element for the button that enables linking element via the linked class name when the button is inside some container rather than being the direct descendant of the linked element
btn - any button element
circular - a button in a shape of a circle with a fixed width and height
danger - a button with the danger color as it's background
disabled - changed the inner text color to grey and for colored buttons alters the background color
flat - a button with no background color when not hovered over or pressed
pill - a button with a very high border radius
primary - a button with the accent color as it's background
square - a button in a shape of a square with a fixed width and height
toggled - a button that's currently toggled on