Loading

Buttons

Kubish buttons are minimalistic in nature, we've only added a few styles to get you started, all of which can be updated using the _variables.scss file.


Primary/ Default button

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

Button


Secondary/ Accent color

<button class="button secondary">Button</button>
<a href="#" class="button secondary">Button</a>

Button


Outline

Outline class does exactly what it is supposed to do: styles a button with an outline with no fill color.

<button class="button outline">Button</button>
<button class="button secondary outline">Button</button>

Button


Disabled

Disabled buttons are automatically styles with muted colors, inactive and not clickable. As you can see, there's no need to set disabled class for the button element, and disabled argument is enough. Having this said, both a link and a button input require disabled class.

<a href="#" class="button disabled" role="button">Link</a>
<button class="button secondary" disabled>Button</button>

Button


Different size buttons

Buttons come in all sizes and shapes.

// Small button
<a href="#" class="button small" role="button">Link</a>
<button class="button secondary small">Button</button>
// Big button
<a href="#" class="button big" role="button">Link</a>
<button class="button secondary big">Button</button>
// Large button
<a href="#" class="button large" role="button">Link</a>
<button class="button secondary large">Button</button>

Big Large


Button transform text

<a href="#" class="button upper" role="button">Link</a>
<button class="button secondary upper">Button</button>
<a href="#" class="button upper outline" role="button">Link</a>
<button class="button secondary upper outline">Button</button>

Button


Round them buttons

<a href="#" class="button round" role="button">Link</a>
<button class="button secondary round">Button</button>
<a href="#" class="button round outline" role="button">Link</a>
<button class="button secondary round outline">Button</button>

Button Button Button


Invert to stand out

For use on darker backgrounds, you can just introduce inverted class to have your button flip its color to the opposite one.

<a href="#" class="button inverted" role="button">Link</a>
<button class="button inverted outline">Button</button>

Button


Button widths

<button class="button w100">...</button>
<button class="button expand">...</button> // Expands to fill the container (same as w100)
<button class="button secondary w50">...</button>



Button w50


Make them "Iconic"

<button class="button"><i class="kube-calendar"></i></button>
<button class="button secondary"><i class="kube-calendar"></i> Change</button>
<button class="button outline"><i class="kube-search"></i></button>
<button class="button secondary outline"><i class="kube-search"></i> Search</button>

Button


Customise till your heart's content

With some Sass magic, you can customize your buttons in a snap. Just include a color class declaration and set the color itself, and you're done.

// scss
.button.red {
    // $text-color, $back-color
    @include button(#fff, #ff3366);
}
// html
<button class="button red">Button</button>
<button class="button red outline">Button</button>