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
        
Global variable
        
Default value
        
Allowed values
        
Comment
      
      

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

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

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

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

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

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

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

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

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

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

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

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

        
Button default state
      
      

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

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

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

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

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

        
Button hover state
      
      

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

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

        
@_button-border-hover
        
@button__hover__border
        
@button__border
        
'' | false | value
        
Hovered button border
      
      

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

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

        
Button active state
      
      

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

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

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

        
@_button-gradient-color-start-active

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

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

        
Button with icon
      
      

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

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

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

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

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

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

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

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

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

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

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

        
@_button-icon-font-text-hide
        
@button-icon__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
            
Global variable
            
Default value
            
Allowed values
            
Comment
        
        

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

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

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

            
@_button-padding
            
@button-primary__padding
            
@button__padding
            
'' | false | value
            
Button padding
        
        

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

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

            
Button default state
        
        

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

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

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

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

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

            
Button hover state
        
        

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

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

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

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

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

            
Button active state
        
        

            
@_button-background-active
            
@button-primary__active__background
            
@button-primary__hover__background
            
'' | false | value
            
Active button background
        
        

            
@_button-border-active
            
@button-primary__active__border
            
@button-primary__hover__border
            
'' | false | value
            
Active button border
        
        

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

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

            
@_button-gradient-color-end-active
            
@button-primary__active__gradient-color-end
            
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
            
Global variable
            
Default value
            
Allowed values
            
Comment
        
        

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

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

            
@_line-height
            
@line-heightbase
            
@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
        
        

            
@_disabled_opacity
            
@buttondisabledopacity
            
.5
            
range between .1 and .9
            
Button as a link opacity
        
    

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
        
Global variable
        
Default value
        
Allowed values
        
Comment
      
      

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

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

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

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

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

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

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

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

        
@_button-border-active
        
@button__active__border
        
@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
        
Global variable
        
Default value
        
Allowed values
        
Comment
      
      

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

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

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