# Default button

Default style for buttons is set by the `.lib-button()` mixin. The mixin is called in `.lib-magento-reset()` or it can be called directly.

## Default button large

<button class="example-button-1 example-button-2" type="button"><span>Button</span></button> <button class="example-button-1 example-button-2 :hover" type="button"><span>Hover</span></button> <button class="example-button-1 example-button-2 :active" type="button"><span>Active</span></button> <button class="example-button-1 example-button-2" type="button" disabled><span>Disabled</span></button>

## Default button

<button class="example-button-1" type="button"><span>Button</span></button> <button class="example-button-1 :hover" type="button"><span>Hover</span></button> <button class="example-button-1 :active" type="button"><span>Active</span></button> <button class="example-button-1" type="button" disabled><span>Disabled</span></button>

## Default button small

<button class="example-button-1 example-button-3" type="button"><span>Button</span></button> <button class="example-button-1 example-button-3 :hover" type="button"><span>Hover</span></button> <button class="example-button-1 example-button-3 :active" type="button"><span>Active</span></button> <button class="example-button-1 example-button-3" type="button" disabled><span>Disabled</span></button>

    button {
        .lib-button(@_button-margin: 3px);
        border-radius: 3px;
        &:active,
        &:focus {
            box-shadow: inset 0 2px 1px rgba(0,0,0,.12);
        }
    }

    .example-button-1 {
        &.example-button-2 {
            .lib-button-l();
        }
        &.example-button-3 {
            .lib-button-s();
            border-radius: 0;
            color: #000;
            &:hover,
            &.active {
                color: #000;
            }
        }
    }

# Button variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_button-font-family
            @font-family__base
            '' | false | value
            Button font family

            @_button-font-size
            @font-size__base
            '' | false | value
            Button font size

            @_button-font-weight
            @font-weight__bold
            '' | false | value
            Button font weight

            @_button-cursor
            pointer
            '' | false | value
            Button cursor

            @_button-display
            inline-block
            '' | false | value
            Button display

            @_button-disabled-opacity
            .5
            '' | false | value
            Button disabled opacity

            @_button-line-height
            @font-size__base + 2
            '' | false | value
            Button height

            @_button-width
            false
            '' | false | value
            Button width

            @_button-margin
            0
            '' | false | value
            Button margin

            @_button-padding
            7px 15px
            '' | false | value
            Button padding

            @_button-gradient
            false
            '' | false | true
            Button has gradient background

            @_button-gradient-direction
            false
            '' | false | vertical | horizontal
            Direction of button background gradient (if there is any)

            Button default state

            @_button-color
            @primary__color
            '' | false | value
            Button text color

            @_button-background
            #f2f2f2
            '' | false | value
            Button background

            @_button-border
            1px solid #cdcdcd
            '' | false | value
            Button border

            @_button-gradient-color-start
            false
            '' | false | value
            Gradient background start color

            @_button-gradient-color-end
            false
            '' | false | value
            Gradient background end color

            Button hover state

            @_button-color-hover
            #555
            '' | false | value
            Hovered button text color

            @_button-background-hover
            #e2e2e2
            '' | false | value
            Hovered button background

            @_button-border-hover
            v
            '' | false | value
            Hovered button border

            @_button-gradient-color-start-hover
            false
            '' | false | value
            Hovered button gradient background start color

            @_button-gradient-color-end-hover
            false
            '' | false | value
            Hovered button gradient background end color

            Button active state

            @_button-color-active
            @button__color
            '' | false | value
            Active button text color

            @_button-background-active
            @button__hover__background
            '' | false | value
            Active button background

            @_button-border-active
            @button__border
            '' | false | value
            Active button border

            @_button-gradient-color-start-active

            false
            '' | false | value
            Active button gradient background start color

            @_button-gradient-color-end-active
            false
            '' | false | value
            Active button gradient background end color

            Button with icon

            @_button-icon-use
            false
            '' | false | true
            Button has an icon

            @_button-font-content
            @icon-settings
            '' | false | value
            Button icon symbol

            @_button-icon-font
            @icon-font
            '' | false | value
            Button icon font

            @_button-icon-font-size
            22px
            '' | false | value
            Button icon font size

            @_button-icon-font-line-height
            @button-icon__font-size
            '' | false | value
            Button icon line height

            @_button-icon-font-color
            inherit
            '' | false | value
            Button icon color

            @_button-icon-font-color-hover
            inherit
            '' | false | value
            Hovered button icon color

            @_button-icon-font-color-active
            inherit
            '' | false | value
            Active button icon color

            @_button-icon-font-margin
            0
            '' | false | value
            Button icon margin

            @_button-icon-font-vertical-align
            top
            '' | false | value
            Button icon vertical align

            @_button-icon-font-position
            @icon__position
            '' | false | before | after
            Button icon font position

            @_button-icon-font-text-hide
            false
            '' | false | true
            Button icon text hide

# Button as an icon

To make a button look like an icon you need to:

enable icon:

      @_button-icon-use: true

set the font icon code:

      @_button-font-content: @icon-cart

hide button text:

      @_button-icon-font-text-hide: true

<button class="example-button-10" type="button"> <span>Add to cart</span> </button> <button class="example-button-10 :hover" type="button"> <span>Add to cart</span> </button> <button class="example-button-10 :active" type="button"> <span>Add to cart</span> </button>

    .example-button-10 {
        .lib-button(
            @_button-margin: 3px,
            @_button-icon-use: true,
            @_button-font-content: @icon-cart,
            @_button-icon-font-text-hide: true
        );
        .lib-button-reset();
    }

# Button with an icon on the left or right side of the text

`@_button-icon-font-position` variable is used to set up the icon postiton

Use `before` to set up button icon position on the left:

      @_button-icon-font-position: before

<button class="example-button-11" type="button" title="Add to cart"> <span>Button</span> </button> <button class="example-button-11 :hover" type="button" title="Add to cart"> <span>Hover</span> </button> <button class="example-button-11 :active" type="button" title="Add to cart"> <span>Active</span> </button> <button class="example-button-11 disabled" type="button" title="Add to cart"> <span>Disabled</span> </button>

Use `after` to set up button icon position on the right:

      @_button-icon-font-position: after

<button class="example-button-12" type="button" title="Add to cart"> <span>Button</span> </button> <button class="example-button-12 :hover" type="button" title="Add to cart"> <span>Hover</span> </button> <button class="example-button-12 :active" type="button" title="Add to cart"> <span>Active</span> </button> <button class="example-button-12 disabled" type="button" title="Add to cart"> <span>Disabled</span> </button>

    .example-button-11 {
        .lib-button(
            @_button-margin: 3px,
            @_button-icon-use: true,
            @_button-font-content: @icon-cart,
            @_button-icon-font-position: before
        );
    }

    .example-button-12 {
        .lib-button(
            @_button-margin: 3px,
            @_button-icon-use: true,
            @_button-font-content: @icon-cart,
            @_button-icon-font-position: after
       );
    }

# Button with fixed width

To get a fixed width button, you need to set:

      @_button-width: 100px

<button class="example-button-13" type="button" title="Add to cart"> <span>Button</span> </button> <button class="example-button-13 :hover" type="button" title="Add to cart"> <span>Hover</span> </button> <button class="example-button-13 :active" type="button" title="Add to cart"> <span>Active</span> </button> <button class="example-button-13 disabled" type="button" title="Add to cart"> <span>Disabled</span> </button>

    .example-button-13 {
        .lib-button(@_button-width: 100px, @_button-margin: 3px);
    }

# Primary button

The `.lib-button-primary()` mixin is used to create a primary button. By default it uses Primary button variables from _variables.less file.

## Primary button big

<button class="example-button-4 example-button-5" type="button"><span>Button</span></button> <button class="example-button-4 example-button-5 :hover" type="button"><span>Hover</span></button> <button class="example-button-4 example-button-5 :active" type="button"><span>Active</span></button> <button class="example-button-4 example-button-5" type="button" disabled><span>Disabled</span></button>

## Primary button

<button class="example-button-4" type="button"><span>Button</span></button> <button class="example-button-4 :hover" type="button"><span>Hover</span></button> <button class="example-button-4 :active" type="button"><span>Active</span></button> <button class="example-button-4 disabled" type="button"><span>Disabled</span></button>

## Primary button small

<button class="example-button-4 example-button-6" type="button"><span>Button</span></button> <button class="example-button-4 example-button-6 :hover" type="button"><span>Hover</span></button> <button class="example-button-4 example-button-6 :active" type="button"><span>Active</span></button> <button class="example-button-4 example-button-6" type="button" disabled><span>Disabled</span></button>

    .example-button-4 {
        .lib-button-primary(
            @_button-margin: 3px
        );
        &:active {
            box-shadow: inset 0 3px 1px rgba(0,0,0,.29);
        }
        &.example-button-5 {
            .lib-button-l(@_button-l-padding: 7px 35px);
        }
        &.example-button-6 {
            .lib-button-s();
            color: #fff;
            &:hover,
            &.active {
                color: #fff;
            }
        }
    }

# Primary button variables

In the variables list primary buttons are configured with `@button-primary` prefix. So for example to configure primary button background you should use `@_button-background` variable of the mixin or `@button-primarybackground` of the global variables list.

                Mixin variable
                Default value
                Allowed values
                Comment

                @_button-line-height
                false
                '' | false | value
                Button line-height

                @_button-width
                false
                '' | false | value
                Button width

                @_button-margin
                false
                '' | false | value
                Button margin

                @_button-padding
                @buttonpadding
                '' | false | value
                Button padding

                @_button-gradient
                false
                '' | false | true
                Button has gradient background

                @_button-gradient-direction
                false
                '' | false | vertical | horizontal
                Direction of button background gradient (if there is any)

                Button default state

                @_button-background
                #1979c3
                '' | false | value
                Button background

                @_button-border
                1px solid #1979c3
                '' | false | value
                Button border

                @_button-color
                #fff
                '' | false | value
                Button text color

                @_button-gradient-color-start
                false
                '' | false | value
                Gradient background start color

                @_button-gradient-color-end
                false
                '' | false | value
                Gradient background end color

                Button hover state

                @_button-background-hover
                #006bb4
                '' | false | value
                Hovered button background

                @_button-border-hover
                1px solid #006bb4
                '' | false | value
                Hovered button border

                @_button-color-hover
                @button-primarycolor
                '' | false | value
                Hovered button text color

                @_button-gradient-color-start-hover
                false
                '' | false | value
                Hovered button gradient background start color

                @_button-gradient-color-end-hover
                false
                '' | false | value
                Hovered button gradient background end color

                Button active state

                @_button-background-active
                @button-primaryhoverbackground
                '' | false | value
                Active button background

                @_button-border-active
                @button-primaryhoverborder
                '' | false | value
                Active button border

                @_button-color-active
                @button-primary__color
                '' | false | value
                Active button text color

                @_button-gradient-color-start-active
                false
                '' | false | value
                Active button gradient background start color

                @_button-gradient-color-end-active
                false
                '' | false | value
                Active button gradient background end color

# Button with gradient background

The `.lib-button()` mixin can get its values from _variables.less file or directly

<button class="example-button-7" type="button"><span>Button</span></button> <button class="example-button-7 :hover" type="button"><span>Hover</span></button> <button class="example-button-7 :active" type="button"><span>Active</span></button> <button class="example-button-7 disabled" type="button"><span>Disabled</span></button>

    .example-button-7 {
        .lib-button(
            @_button-margin: 3px,
            @_button-padding: @button__padding,
            @_button-gradient-color-start: #1979c3,
            @_button-gradient-color-end: #006bb4,
            @_button-color: #fff,
            @_button-gradient-color-start-hover: #006bb4,
            @_button-gradient-color-end-hover: #1979c3,
            @_button-color-hover: #fff,
            @_button-gradient-color-start-active: #006bb4,
            @_button-gradient-color-end-active: #006bb4,
            @_button-color-active: #fff,
            @_button-gradient: true,
            @_button-gradient-direction: vertical,
            @_button-border: @button-primary__border,
            @_button-border-hover: @button-primary__hover__border,
            @_button-border-active: @button-primary__active__border
        );
        border-radius: 3px;
        &:active {
            box-shadow: inset 0 3px 1px rgba(0,0,0,.29);
        }
    }

# Button as a link

The `.lib-button-as-link()` mixin is used to make button look like a link. It resets default button styles.

<button class="example-button-8" type="button"><span>Button</span></button> <button class="example-button-8 :visited" type="button"><span>Visited</span></button> <button class="example-button-8 :hover" type="button"><span>Hover</span></button> <button class="example-button-8 :active" type="button"><span>Active</span></button> <button class="example-button-8 disabled" type="button"><span>Disabled</span></button>

    .example-button-8 {
        .lib-button-as-link();
        font-weight: normal;
        &:active {
            box-shadow: none;
        }
    }

# Button as a link variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @_link-color
                @link-color
                '' | false | value
                Button as a link color

                @_link-color-hover
                @link-color-hover
                '' | false | value
                Button as a link hovered color

                @_line-height
                @line-height-base
                '' | false | value
                Button as a link line height

                @_margin
                0
                '' | false | value
                Button as a link margin

                @_padding
                0
                '' | false | value
                Button as a link padding

# Link as a button

The `.lib-link-as-button()` mixin is used to reset link styles (text-decoration and display inline). Then to make it look like a button, you need to add the `.lib-button()` mixin with appropriate paremeters.

<a href="#" class="example-button-9"><span>Button</span></a> <a href="#" class="example-button-9 :hover"><span>Hover</span></a> <a href="#" class="example-button-9 :active"><span>Active</span></a> <a href="#" class="example-button-9 disabled"><span>Disabled</span></a>

    .example-button-9 {
        .lib-link-as-button();
        .lib-button();
        margin: 3px;
        border-radius: 3px;
        font-weight: bold;
        &:active {
            box-shadow: inset 0 3px 1px rgba(0,0,0,.29);
        }
    }

# Button reset

The `.lib-button-reset()` mixin is used to fully reset button styles.

<button class="example-button-14" type="button"><span>Button with reset styles</span></button>

    .example-button-14 {
        .lib-button-reset();
    }

# Button revert secondary color

The `.lib-button-revert-secondary-color()` mixin is used to revert button styles (primary for example) to secondary color styles. Also can be passed any color, background and border if needed.

<button class="example-button-15" type="button"><span>Reverted color</span></button> <button class="example-button-16" type="button"><span>Custom colors</span></button>

    .example-button-15 {
        .lib-button-primary();
        .lib-button-revert-secondary-color();
    }

# Button revert secondary color variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_button-color
            @button__color
            '' | false | value
            Button color

            @_button-background
            @button__background
            '' | false | value
            Button background

            @_button-border
            @button__border
            '' | false | value
            Button border

            @_button-color-hover
            @button__hover__color
            '' | false | value
            Button hover color

            @_button-background-hover
            @button__hover__background
            '' | false | value
            Button hover background

            @_button-border-hover
            @button__hover__border
            '' | false | value
            Button hover border

            @_button-color-active
            @button__active__color
            '' | false | value
            Button active color

            @_button-background-active
            @button__active__background
            '' | false | value
            Button active background

            @_button-border-active
            @button__active__border
            '' | false | value
            Button active border

# Button revert secondary size

The `.lib-button-revert-secondary-size()` mixin is used to revert button sizes to secondary button sizes. Also can be passed font-size, line-height and padding if needed.

<button class="example-button-17" type="button"><span>Reverted size</span></button> <button class="example-button-18" type="button"><span>Custom sizes</span></button>

    .example-button-17 {
        .lib-button-l();
        .lib-button-revert-secondary-size();
    }
    .example-button-18 {
        .lib-button-revert-secondary-size(
            @_button-font-size: 10px,
            @_button-line-height: 12px,
            @_button-padding: 4px 10px
        );
    }

# Button revert secondary size variables

            Mixin variable
            Default value
            Allowed values
            Comment

            @_button-font-size
            @button__font-size
            '' | value
            Button font size

            @_button-line-height
            @button__line-height
            '' | value
            Button line-height

            @_button-padding
            @button__padding
            '' | value
            Button padding