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

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

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

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