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
$buttons: () !default;
$buttons: map-merge((
        // name         color                          font-color
        primary:        map-get($colors, primary)      map-get($colors, white),
        secondary:      map-get($colors, secondary)    map-get($colors, black)
), $buttons);

$button-border-width:           $border-width !default;
$button-font-size:              1.5rem !default;
$button-font-weight:            400 !default;
$button-line-height:            1.5 !default;        
$button-padding-y:              .8rem !default;
$button-padding-x:              1rem !default;
$button-transition:             background-color linear $animation-speed-fast,
                                border-color linear $animation-speed-fast !default;

// the below applies to the default button class only `.button`
$button-default-border-color:   $border-color !default;
$button-default-bg-color:       map-get($colors, white) !default;
$button-default-font-color:     $font-color !default;