|   Get in touch


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>


Secondary/ Accent color

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



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>



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>


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>


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 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>


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>