Button

Overview #

Superkube generates buttons based on three maps, which should be written in your vars:

• $colors — specifies the style colors and colors of button states;
• $buttons-scale — defines button sizes;
• $buttons — defines how the buttons should look in different styles.

Also, each style has three states, which determine the behavior of the button in the normal state, when hovering and disabled.

This is how it can look:

// Color
$colors: (
    ...
    button: (
        default: (
            base: (
                background: palette(white),
                border: palette(neutral, light),
                text: palette(neutral, darker)
            ),
            hover: ( ... ),
            disabled: ( ... )
        )
        primary: ( ... )
    )
    ...
);

// Scale
$buttons-scale: (
    regular: (
        font-size: type-size(button, regular),
        border-radius: radius(base),
        padding: .4em 20px .4em 20px,
        height: 44px
    ),
    large: ( ... )
);

// Appearence
$buttons: (
    default: (
        base: (
            font-weight: normal,
            text-transform: none,
            color: color(button, default, base, text),
            border: 1px solid color(button, default, base, border),
            background-color: color(button, default, base, background)
        ),
        hover: ( ... ),
        disabled: ( ... )
    ),
    primary: ( ... )
);

Usage #

By default, Superkube generates two button styles:

• button
• button-primary

Default Primary

<button class="button">...</button>
<button class="button button-primary">...</button>

Own style #

Here is how to add your button style to your vars:

// Color
$colors: (
    ...
    button: (
        ...
        negative: (
            base: (
                background: palette(negative, base),
                border: transparent,
                text: palette(negative, lighter)
            ),
            hover: ( ... ),
            disabled: ( ... )
        )
        ...
    )
    ...
);

// Appearence
$buttons: (
    ...
    negative: (
        base: (
            font-weight: normal,
            text-transform: none,
            color: color(button, negative, base, text),
            border: 1px solid color(button, negative, base, border),
            background-color: color(button, negative, base, background)
        ),
        hover: ( ... ),
        disabled: ( ... )
    )
    ...
);

As a result, Superkube will generate a style button with class button-negative.

<button class="button button-negative">...</button>

Scale #

The size of the buttons are specified in your vars/button in $buttons-scale map.

// Scale
$buttons-scale: (
    regular: (
        font-size: type-size(button, regular),
        border-radius: radius(base),
        padding: .4em 20px .4em 20px,
        height: 44px
    ),
    large: ( ... )
);

By default, Superkube generates two button sizes:

• regular
• large

Regular Large Large

<button class="button">...</button>
<button class="button button-large">...</button>
<button class="button button-primary button-large">...</button>

Own size #

To add your button size, you need to specify it in the $buttons-scale and add its text size to the $type map, for example like this:

// Type
$type: (
    ...
    button: (
        small: 13px 1.25
        regular: 15px 1.25,
        large: 16px 1.25,
        huge: 21px 1.25
    )
    ...
);

// Scale
$buttons-scale: (
    small: (
        font-size: type-size(button, small),
        border-radius: radius(base),
        padding: .4em 16px .4em 16px,
        height: 36px
    ),
    huge: (
        font-size: type-size(button, huge),
        border-radius: radius(base),
        padding: .4em 40px .4em 40px,
        height: 60px
    )
);

As a result Superkube will generate buttons with new sizes:

• button-small
• button-huge

<button class="button button-small">...</button>
<button class="button button-huge">...</button>

Gradient #

Buttons may have a gradient background, to do this you need to specify two colors for the button background in the $colors map:

$colors: (
    ...
    button: (
        primary: (
            base: (
                background: (
                    from: palette(active, base),
                    to: palette(active, dark)
                ),
                border: transparent,
                text: palette(negative, lighter)
            )
        )
    )
    ...
);