Button

As per our colors and names - there are some pre-defined button styles ships with roolith css framwork out of the box. You may want to use buttons for various purpose. There are four sizes small, medium, default and large with 8 different colors!

Default button element

<button class="button">Button element</button>

All button styles

<a class="button" href="#">Normal</a>
<a class="button button-primary" href="#">Primary</a>
<a class="button button-secondary" href="#">Secondary</a>
<a class="button button-tertiary" href="#">Tertiary</a>
<a class="button button-info" href="#">Info</a>
<a class="button button-success" href="#">Success</a>
<a class="button button-danger" href="#">Danger</a>
<a class="button button-link" href="#">Link</a>
<a class="button button-dark" href="#">Dark</a>
<a class="button button-black" href="#">Black</a>

Outlined button

<button class="button button-outline">Default</button>
<button class="button button-outline button-primary">Primary</button>
<button class="button button-outline button-secondary">Secondary</button>
<button class="button button-outline button-tertiary">Tertiary</button>
<button class="button button-outline button-info">Info</button>
<button class="button button-outline button-success">Success</button>
<button class="button button-outline button-danger">Danger</button>
<button class="button button-outline button-link">Link</button>
<button class="button button-outline button-dark">Dark</button>
<button class="button button-outline button-black">Black</button>

Disabled button

Disabled button Disabled primary button

<button class="button disabled">Disabled button</button>
<button class="button disabled button-primary">Disabled primary button</button>

Rounded button

<button class="button button-rounded">Default</button>
<button class="button button-rounded button-primary">Primary</button>
<button class="button button-rounded button-secondary">Secondary</button>
<button class="button button-rounded button-tertiary">Tertiary</button>
<button class="button button-rounded button-info">Info</button>
<button class="button button-rounded button-success">Success</button>
<button class="button button-rounded button-danger">Danger</button>
<button class="button button-rounded button-link">Link</button>
<button class="button button-rounded button-dark">Dark</button>
<button class="button button-rounded button-black">Black</button>

Rounded outline button

<button class="button button-outline button-rounded">Default</button>
<button class="button button-outline button-rounded button-primary">Primary</button>
<button class="button button-outline button-rounded button-secondary">Secondary</button>
<button class="button button-outline button-rounded button-tertiary">Tertiary</button>
<button class="button button-outline button-rounded button-info">Info</button>
<button class="button button-outline button-rounded button-success">Success</button>
<button class="button button-outline button-rounded button-danger">Danger</button>
<button class="button button-outline button-rounded button-link">Link</button>
<button class="button button-outline button-rounded button-dark">Dark</button>
<button class="button button-outline button-rounded button-black">Black</button>

Button text

<a class="button button-text" href="#">Normal</a>
<a class="button button-text button-primary" href="#">Primary</a>
<a class="button button-text button-secondary" href="#">Secondary</a>
<a class="button button-text button-tertiary" href="#">Tertiary</a>
<a class="button button-text button-info" href="#">Info</a>
<a class="button button-text button-success" href="#">Success</a>
<a class="button button-text button-danger" href="#">Danger</a>
<a class="button button-text button-link" href="#">Link</a>

Button with loading

<button class="button loading">Download button with loading</button>
<button class="button button-medium loading">Download button with loading</button>
<button class="button button-small loading">Download button with loading</button>
<button class="button button-large loading">Download button with loading</button>

<button class="button button-primary loading">Download button with loading</button>
<button class="button button-primary button-medium loading">Download button with loading</button>
<button class="button button-primary button-small loading">Download button with loading</button>
<button class="button button-primary button-large loading">Download button with loading</button>

<button class="button button-dark loading">Download button with loading</button>
<button class="button button-dark button-medium loading">Download button with loading</button>
<button class="button button-dark button-small loading">Download button with loading</button>
<button class="button button-dark button-large loading">Download button with loading</button>

You can use any icon with button. For example i used Iconoir.

<button class="button button-primary"><i class="iconoir-download"></i> Download button with icon</button>
<button class="button button-small"><i class="iconoir-download"></i> Download button with icon</button>
<button class="button button-medium"><i class="iconoir-download"></i> Download button with icon</button>
<button class="button button-large button-primary"><i class="iconoir-download"></i> Download button with icon</button>

More button icon usage

<div class="button-bundle">
    <a class="button button-has-icon" href="#">
        Button with icon right
        <i class="iconoir-arrow-right"></i>
    </a>

    <a class="button button-has-icon" href="#">
        <i class="iconoir-arrow-left"></i>
        Button with icon left
    </a>
</div>

<div class="button-bundle">
    <a class="button button-icon" href="#">
        Button with icon right
        <i class="iconoir-arrow-right"></i>
    </a>

    <a class="button button-icon" href="#">
        <i class="iconoir-arrow-left"></i>
        Button with icon left
    </a>
</div>

Different sizes

Ships with pre-defined sizes -

<a class="button button-small" href="#">Small button</a>
<a class="button button-medium" href="#">Medium button</a>
<a class="button" href="#">Default button</a>
<a class="button button-large" href="#">Large button</a>

Wait! here is button group ;)

<div class="button-group">
    <a class="button button-primary" href="#">First</a>
    <a class="button button-primary" href="#">Second</a>
    <a class="button button-primary" href="#">Third</a>
</div>

<div class="button-group">
    <a class="button active" href="#">First</a>
    <a class="button" href="#">Second</a>
    <a class="button" href="#">Third</a>
</div>

SASS

Reference from _button.scss To change button color see color section.

$button-radius: $global-border-radius !default;
$button-hover-shadow: 0 rem(1) rem(1) rgba(0, 0, 0, 0.1) !default;
$button-hover-shadow-dark: 0 rem(1) rem(1) rgba(0, 0, 0, 0.2) !default;
$button-active-shadow: inset 0 0 rem(3) rgba(0, 0, 0, 0.1) !default;
$button-active-dark-shadow: inset 0 0 rem(3) rgba(0, 0, 0, 0.2) !default;

/* Button */
--r-button-radius: #{$button-radius};
--r-button-hover-shadow: #{$button-hover-shadow};
--r-button-hover-shadow-dark: #{$button-hover-shadow-dark};
--r-button-active-shadow: #{$button-active-shadow};
--r-button-active-dark-shadow: #{$button-active-dark-shadow};
--r-button-base-white: var(--r-color-white);
--r-button-primary-color: var(--r-color-primary);
--r-button-secondary-color: var(--r-color-secondary);

/* Button default */
--r-button-default-background: var(--r-color-white-darken-4);
--r-button-default-background-end: var(--r-color-white-darken-7);
--r-button-default-border: var(--r-color-white-darken-15);
--r-button-default-color: var(--r-color-dark-lighten-20);
--r-button-default-hover-background: var(--r-color-white-darken-3);
--r-button-default-hover-background-end: var(--r-color-white-darken-6);
--r-button-default-hover-border: var(--r-color-white-darken-20);
--r-button-default-hover-color: var(--r-color-dark-lighten-20);