Button

Use button element for actions in forms, dialogs and other places. We support different sizes, states and more.

Examples

Storefront theme provides predefined stylings for five buttons those are: primary, secondary, outline, ghost and special button.

HTML

<button class="btn btn_primary">Primary</button>
<button class="btn btn_secondary">Secondary</button>
<button class="btn btn_outline">Outline</button>
<button class="btn btn_ghost">Ghost or link</button>
<button class="btn btn_special">Special</button>

Button tags

The .btn classes where designed to be used with <button> or <a> elements. However, you can use them with any element. Eg. <div> or <span>. You should remeber to add appropriate attribute to such elements `role="button" to tell assistive technologies such as screen readers what purpose the element serves.

Primary buttons

Used for primary actions (eg. Buy product, go to checkout). They come with four different sizes (like any other buttons)

HTML

<button class="btn btn_primary btn_l">Primary L</button>
<button class="btn btn_primary btn_s">Primary</button>
<button class="btn btn_primary">Primary S</button>
<button class="btn btn_primary btn_xs">Primary XS</button>

Secondary buttons

HTML

<button class="btn btn_secondary btn_l">Secondary L</button>
<button class="btn btn_secondary btn_s">Secondary</button>
<button class="btn btn_secondary">Secondary S</button>
<button class="btn btn_secondary btn_xs">Secondary XS</button>

Outline buttons

HTML

<button class="btn btn_outline btn_l">Outline L</button>
<button class="btn btn_outline btn_s">Outline</button>
<button class="btn btn_outline">Outline S</button>
<button class="btn btn_outline btn_xs">Outline XS</button>

Ghost buttons

HTML

<button class="btn btn_ghost btn_l">Ghost L</button>
<button class="btn btn_ghost btn_s">Ghost</button>
<button class="btn btn_ghost">Ghost S</button>
<button class="btn btn_ghost btn_xs">Ghost XS</button>

Disabled state

Each button may be disabled. Styles make buttons look visually disabled, but they are still clickable. To make them unclickable, add disabled attribute to the button or aria-disabled="true" to other elements which don't support disabled attribute.

HTML

<button class="btn btn_primary-disabled">Disabled</button>
<button class="btn btn_secondary-disabled">Disabled</button>
<button class="btn btn_outline-disabled">Disabled</button>
<button class="btn btn_ghost-disabled">Disabled</button>

Buttons with icons

Each kind of button can have an icon. Either on left:

HTML

<button class="btn btn_primary">
    <svg class="icon btn__icon btn__icon_left">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-eye"></use>
    </svg>
    Primary
</button>
<button class="btn btn_secondary">
    <svg class="icon btn__icon btn__icon_left">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-eye"></use>
    </svg>
    Primary
</button>
<button class="btn btn_outline">
    <svg class="icon btn__icon btn__icon_left">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-eye"></use>
    </svg>
    Primary
</button>
<button class="btn btn_ghost">
    <svg class="icon btn__icon btn__icon_left">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-eye"></use>
    </svg>
    Primary
</button>

Or right side.

HTML

<button class="btn btn_primary">
    Primary
    <svg class="icon btn__icon btn__icon_right">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-refresh-cw"></use>
    </svg>
</button>

<button class="btn btn_secondary">
    Primary
    <svg class="icon btn__icon btn__icon_right">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-refresh-cw"></use>
    </svg>
</button>

<button class="btn btn_outline">
    Primary
    <svg class="icon btn__icon btn__icon_right">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-refresh-cw"></use>
    </svg>
</button>

<button class="btn btn_ghost">
    Primary
    <svg class="icon btn__icon btn__icon_right">
        <use xlink:href="https://example.com/assets/img/icons/symbol-defs.svg#icon-refresh-cw"></use>
    </svg>
</button>

LESS

You can modify any button less variable in your User Less section to change button styles.

Buttons variables

Variables used to style buttons.

@btnBorderWidth: 1;
@btnBorderStyle: solid;
@btnBorderColor: transparent;
@btnBorderRadius: @globalBorderRadius;
@btnLineHeight: 18;

@btnIconGutter: @buttonsGutter * 0.625;

@btnFontSizeInPxL: @fontSizeInPxL;
@btnPaddingTopL: 9;
@btnPaddingRightL: 24;
@btnPaddingBottomL: 9;
@btnPaddingLeftL: 24;

@btnFontSizeInPxM: @fontSizeInPxM;
@btnPaddingTopM: 7;
@btnPaddingRightM: 20;
@btnPaddingBottomM: 7;
@btnPaddingLeftM: 20;

@btnFontSizeInPxS: @fontSizeInPxS;
@btnPaddingTopS: 7;
@btnPaddingRightS: 16;
@btnPaddingBottomS: 7;
@btnPaddingLeftS: 16;

@btnFontSizeInPxXS: @fontSizeInPxXS;
@btnPaddingTopXS: 5;
@btnPaddingRightXS: 10;
@btnPaddingBottomXS: 5;
@btnPaddingLeftXS: 10;

@btnPaddingIcon: 9;
@btnFontSizeInPxIcon: @btnFontSizeInPxL;

@btnBgColorPrimary: @primaryColor;
@btnColorPrimary: @neutralColors0;
@btnBgColorPrimaryHover: darken(@btnBgColorPrimary, 14.5%);
@btnColorPrimaryHover: @btnColorPrimary;
@btnBgColorPrimaryDisabled: @primaryColors300;
@btnColorPrimaryDisabled: @neutralColors0;

@btnBgColorSecondary: @primaryColors50;
@btnColorSecondary: @primaryColor;
@btnBgColorSecondaryHover: darken(@btnBgColorSecondary, 14.5%);
@btnColorSecondaryHover: @btnColorSecondary;
@btnBgColorSecondaryDisabled: @primaryColors50;
@btnColorSecondaryDisabled: @primaryColors200;

@btnBgColorSpecial: @primaryColors900;
@btnColorSpecial: @neutralColors0;
@btnBgColorSpecialHover: lighten(@btnBgColorSpecial, 7.4%);
@btnColorSpecialHover: @btnColorSpecial;
@btnBgColorSpecialDisabled: @neutralColors400;
@btnColorSpecialDisabled: @btnColorSpecial;

@btnOutlineColor: @neutralColors300;
@btnBgColorOutline: inherit;
@btnColorOutline: @neutralColors700;
@btnBgColorOutlineHover: fade(@btnBorderColorOutline, 30%);
@btnColorOutlineHover: @neutralColors900;
@btnBorderWidthOutline: @btnBorderWidth;
@btnBorderColorOutline: @btnOutlineColor;
@btnBgColorOutlineDisabled: transparent;
@btnColorOutlineDisabled: @btnOutlineColor;
@btnBorderColorOutlineHover: @neutralColors500;

@btnBgColorGhost: transparent;
@btnColorGhost: @primaryColor;
@btnColorGhostHover: darken(@btnColorGhost, 14.5%);
@btnBgColorGhostHover: transparent;
@btnBgColorGhostDisabled: transparent;
@btnColorGhostDisabled: @neutralColors300;

@btnBgColorIcon: @neutralColors50;
@btnColorIcon: @globalFontColorSecondary;
@btnBgColorIconHover: @neutralColors100;

@btnIconPaddingL: 15;
@btnIconPaddingM: 11;
@btnIconPaddingS: 9;
@btnIconPaddingXs: 7;

If you want to change button styles, you can just change the variables. To change default border-radius just modify @btnBorderRadius variable.

@btnBorderRadius: 10px;

To change primary button look:

@btnBgColorPrimary: #ff0000;
@btnColorPrimary: #fff;
@btnBgColorPrimaryHover: #fff000;
@btnBgColorPrimaryDisabled: #c1c1c1;
@btnColorPrimaryDisabled: #000;

Buttons mixins

Those mixins are used to create button variants.

.btn-decorate-appearance (@bgColor: transparent, @color: @btnColorPrimary, @borderColor:  transparent) {
    background-color: @bgColor;
    color: @color;
    border-color: @borderColor;
    fill: @color;
    stroke: @color;
}

.btn-decorate-size (@fontSize, @paddingT, @paddingR, @paddingB, @paddingL, @lineHeight) {
    .font-size(@fontSize);
    .line-height(@lineHeight);
    .padding-to-unit(@paddingT, @paddingR, @paddingB, @paddingL);
}

If you want to create XL button varuabt you can use mixins .btn-decorate-size (You have to provide those variables)

.btn {
    &_xl {
        .btn-decorate-size(@btnFontSizeInPxXl, @btnPaddingTopL, @btnPaddingRightXl, @btnPaddingBottomXl, @btnPaddingLeftXl, @lineHeightInPxXl);
    }
}

or create success button variant.

.btn {
    &_success {
        .btn-decorate-appearance(@btnBgColorSuccess, @btnColorSuccess);
    }
}

Buttons styles

Here are standard buttons styles.

.btn {
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-family: @baseFontFamilyName;
    text-decoration: none;
    text-align: center;

    background-color: transparent;
    border: ~'@{btnBorderWidth}px' @btnBorderStyle @btnBorderColor;
    border-radius: ~'@{btnBorderRadius}px';

    user-select: none;
    cursor: pointer;
    min-height: 40px;
    min-width: 40px;

    .weight-semibold();
    .line-height(@btnLineHeight);
    .btn-decorate-size(@btnFontSizeInPxM, @btnPaddingTopM, @btnPaddingRightM, @btnPaddingBottomM, @btnPaddingLeftM, @lineHeightInPxM);

    &_l {
        .btn-decorate-size(@btnFontSizeInPxL, @btnPaddingTopL, @btnPaddingRightL, @btnPaddingBottomL, @btnPaddingLeftL, @lineHeightInPxL);
    }

    &_s {
        .btn-decorate-size(@btnFontSizeInPxS, @btnPaddingTopS, @btnPaddingRightS, @btnPaddingBottomS, @btnPaddingLeftS, @lineHeightInPxS);
    }

    &_xs {
        .btn-decorate-size(@btnFontSizeInPxXS, @btnPaddingTopXS, @btnPaddingRightXS, @btnPaddingBottomXS, @btnPaddingLeftXS, @lineHeightInPxXS);
    }

    &_full-width {
        min-width: fit-content;
        width: 100%;
    }

    &_primary {
        .btn-decorate-appearance(@btnBgColorPrimary, @btnColorPrimary);

        &:hover {
            background-color: @btnBgColorPrimaryHover;
            color: @btnColorPrimaryHover;
        }

        &-disabled {
            .btn-decorate-appearance(@btnBgColorPrimaryDisabled, @btnColorPrimaryDisabled);
            pointer-events: none;
        }
    }

    &_secondary {
        .btn-decorate-appearance(@btnBgColorSecondary, @btnColorSecondary);

        &:hover {
            background-color: @btnBgColorSecondaryHover;
            color: @btnColorSecondaryHover;
        }

        &-disabled {
            .btn-decorate-appearance(@btnBgColorSecondaryDisabled, @btnColorSecondaryDisabled);
            pointer-events: none;
        }
    }

    &_special {
        .btn-decorate-appearance(@btnBgColorSpecial, @btnColorSpecial);

        &:hover {
            background-color: @btnBgColorSpecialHover;
            color: @btnColorSpecialHover;
        }

        &-disabled {
            .btn-decorate-appearance(@btnBgColorSpecialDisabled, @btnColorSpecialDisabled);
            pointer-events: none;
        }
    }

    &_outline {
        .btn-decorate-appearance(@btnBgColorOutline, @btnColorOutline, @btnBorderColorOutline);
        border-width: ~'@{btnBorderWidthOutline}px';

        &:hover {
            color: @btnColorOutlineHover;
            border-color: @btnBorderColorOutlineHover;
        }

        &-disabled {
            .btn-decorate-appearance(@btnBgColorOutlineDisabled, @btnColorOutlineDisabled, @btnBorderColorOutline);
            pointer-events: none;
        }
    }

    &_ghost {
        .btn-decorate-appearance(@btnBgColorGhost, @btnColorGhost);

        &:hover {
            color: @btnColorGhostHover;
            background-color: @btnBgColorGhostHover;
        }

        &-disabled {
            .btn-decorate-appearance(@btnBgColorGhostDisabled, @btnColorGhostDisabled);
            pointer-events: none;
        }
    }

    &_icon {
        .btn-decorate-size(@btnFontSizeInPxIcon, @btnPaddingIcon, @btnPaddingIcon, @btnPaddingIcon, @btnPaddingIcon, @lineHeightInPxL);
        .btn-decorate-appearance(@btnBgColorIcon, @btnColorIcon);

        border-radius: 50%;
        aspect-ratio: 1/1;

        &:hover {
            background-color: @btnBgColorIconHover;
        }
    }

    &_join-right {
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    &_join-left {
        border-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    &__icon {
        .icon-m();
        stroke: inherit;

        &_left {
            margin-right: @btnIconGutter;
        }

        &_right {
            margin-left: @btnIconGutter;
        }

        &_filled {
            fill: inherit;
        }
    }
}

@media (max-width: (@breakPointSm - 1)) {
    .btn {
        &_full-width {
            &-mobile {
                width: 100%;
            }
        }
    }
}

buy-button {
    display: inline-flex;
}