KARMA CSS

Basic

All button, input types of button, submit, reset can be styled as buttons by adding the class .button:

<button class="button">button element</button>
<input class="button" type="submit" value="submit input">
<input class="button" type="button" value="button input">
<input class="button" type="reset" value="reset input">

Anchor

Additionally <a> tags can be styled as a button by adding the class .button.

<a class="button" href="#">anchor button</a>

Coloured

You can apply additional styles to buttons by adding a further class. There are two created out of the box .button-primary and .button-secondary.

<button class="button button-primary">button element</button>
<button class="button button-secondary">button element</button>

Variables

You can define additional buttons in variables, the currently defined buttons are:

$buttons: (
        // name         color                          font-color
        primary:        map-get($colors, primary)      map-get($colors, white),
        secondary:      map-get($colors, secondary)    map-get($colors, black)
) !default;

So an additional defined button with the name black will create a button class .button-black. This class just sets properties like background, color and hover states etc.

Other variables include:

$button-font-size:              1.5rem !default;
$button-font-weight:            400 !default;
$button-padding-y:              1rem !default;
$button-padding-x:              1rem !default;
// the below applies to the default button class only `.button`
$button-default-bg-color:       map-get($colors, white) !default;