<button class="button " disabled>
I am a disabled button
</button>
<{{{ tag }}} class="button {{ class }}" {{{ attributes }}}>
{{{ text }}}
</{{{ tag }}}>
{
"tag": "button",
"class": "",
"attributes": "disabled",
"text": "I am a disabled button"
}
$button__min-size : 48px !default;
$button__padding : 0 $spacer--large !default;
$button__background : $theme-primary !default;
$button__background-hover : $theme-primary !default;
$button__border : none !default;
$button__border-radius : $border-radius !default;
$button__outline : $outline-base !default;
$button__font-family : $font-family-base !default;
$button__font-size : $font-size-base !default;
$button__font-weight : $font-weight-base !default;
$button__line-height : 1 !default;
$button__text-color : $white !default;
$button__text-transform : none !default;
$button__text-decoration : none !default;
$button__text-decoration-hover : none !default;
$button__transform : perspective(1px) translateZ(0) !default;
$button__transition : all 0.5s ease-in-out !default;
// before used in hover state
$button__before-display : none !default;
$button__before-content : '' !default;
$button__before-width : 100% !default;
$button__before-position-left : 0 !default;
$button__before-position-top : 0 !default;
$button__before-position-bottom : 0 !default;
$button__before-background : $color-primary !default;
$button__before-transform : scaleX(0) !default;
$button__before-transform-origin : 0 50% !default;
// before hover
$button__before-transform-hover : scaleX(1) !default;
$button__before-display-hover : block !default;
// after used in hover state
$button__after-display : none !default;
$button__after-content : none !default;
$button__after-position-left : 20% !default;
$button__after-position-top : 50% !default;
$button__after-z-index : 1 !default;
$button__after-opacity : 0 !default;
$button__after-transform : translateY(-50%) !default;
$button__after-transform-origin : center !default;
// after hover
$button__after-display-hover : block !default;
$button__after-position-left-hover : calc(50% - 12px) !default;
$button__after-opacity-hover : 1 !default;
// disabled
$button__background-disabled : $gray !default;
// Secondary
$button__color--secondary : $color-primary !default;
$button__background--secondary : $white !default;
$button__border--secondary : 2px solid $button__color--secondary !default;
// Secondary hover
$button__color-hover--secondary : $white !default;
$button__background-hover--secondary : $black !default;
$button__before-z-index-hover--secondary : -1 !default;
$button__after-display-hover--secondary : none !default;
// Secondary light
$button__font-weight--light : $font-weight-normal !default;
$button__text-transform--light : none !default;
// Button Link
$button__color--link : $color-primary !default;
$button__background--link : transparent !default;
$button__text-transform--link : none !default;
$button__text-decoration--link : underline !default;
// Button Link hover
$button__color-hover--link : $theme-second !default;
$button__background-hover--link : transparent !default;
$button__before-display-hover--link : none !default;
$button__after-display-hover--link : none !default;
// Button icon
$button__padding--icon : 0 $spacer !default;
$button__icon-size : 24px !default;
$button__icon-fill : $color-primary !default;
$button__icon-transition : $transition-base !default;
$button__icon-fill-hover--icon : $theme-dark !default;
$button__bg--icon : $white !default;
$button__icon-z-index : $z-index-low !default;
$button__text-margin--icon : 0 $spacer !default;
$button__text-z-index : $z-index-low !default;
$button__text-color--icon : $color-primary !default;
$button__text-color-hover--icon : $theme-second !default;
$button__font-weight--icon : $font-weight-normal !default;
$button__text-transform--icon : none !default;
$button__background-hover--icon : $gray-light !default;
// Button icon light
$button__icon-fill-hover--icon-light : $color-primary !default;
$button__before-background--icon-light : $gray-light !default;
$button__text-color-hover--icon-light : $color-primary !default;
$button__background-hover--icon-light : initial !default;
// Button icon border
$button__border--icon-border : $border-width-base $border-style-base $color-primary !default;
$button__border-hover--icon-border : $button__border--icon-border !default;
$button__background--icon-border : $button__bg--icon !default;
$button__background-hover--icon-border : $button__background-hover--icon !default;
// Button rotate-icon
$button__icon-fill-hover--rotate-icon : $color-primary !default;
$button__transform-hover--rotate-icon : rotate(180deg) !default;
$button__before-background--rotate-icon : $gray-light !default;
$button__background-hover--rotate-icon : initial !default;
// Button add-to
// icon & text
$button__icon-display--add-to : block !default;
$button__icon-display--add-to\@medium : none !default;
$button__text-display--add-to : none !default;
$button__text-display--add-to\@medium : block !default;
$button__before-display--add-to : block !default;
$button__after-content-icon--add-to : none !default;
$button__after-position-left--add-to : calc(50% - 12px) !default;
$button__after-position-top--add-to : auto !default;
$button__after-transform--add-to : translateX(-150%) !default;
$button__after-transform-hover--add-to : translateY(0) !default;
$button__after-content-text--add-to : none !default;
$button__background--icon-fill : transparent !default;
$button__icon-after-mask-repeat--icon-fill : no-repeat !default;
$button__icon-after-mask-position--icon-fill : center / cover !default;
$button__icon-after-bg-size--icon-fill : 400% 400% !default;
$button__icon-after-bg-image--icon-fill : linear-gradient(to right, $color-primary 50%, transparent 50%) !default;
$button__icon-after-bg-position--icon-fill : 100% 100% !default;
$button__icon-after-bg-position-hover--icon-fill: 0 100% !default;
$button__icon-after-transition--icon-fill : background 0.5s linear !default;
$button__icon-after-z-index--icon-fill : -1 !default;
$button__icon-after-oapcity--icon-fill : 1 !default;
$button__icon-fill-hover--icon-fill : $color-primary !default;
$button__before-background--icon-fill : transparent !default;
$button__background-hover--icon-fill : initial !default;
%button-before:before {
content: $button__before-content;
// sass-lint:disable no-important
display: $button__before-display !important;
// sass-lint:enable no-important
position: absolute;
width: $button__before-width;
left: $button__before-position-left;
top: $button__before-position-top;
bottom: $button__before-position-bottom;
background-color: $button__before-background;
transform: $button__before-transform;
transform-origin: $button__before-transform-origin;
transition: $button__transition;
pointer-events: none;
}
%button-after:after {
content: $button__after-content;
// sass-lint:disable no-important
display: $button__after-display !important;
// sass-lint:enable no-important
position: absolute;
left: $button__after-position-left;
top: $button__after-position-top;
width: $button__icon-size;
height: $button__icon-size;
padding: $icon__padding;
z-index: $button__after-z-index;
opacity: $button__after-opacity;
transform: $button__after-transform;
transform-origin: $button__after-transform-origin;
transition: $button__transition;
pointer-events: none;
}
@import 'button-variables';
.button {
@extend %button-before;
@extend %button-after;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: $button__min-size;
min-width: $button__min-size;
padding: $button__padding;
background-color: $button__background;
border: $button__border;
border-radius: $button__border-radius;
outline: $button__outline;
font-family: $button__font-family;
font-size: $button__font-size;
font-weight: $button__font-weight;
line-height: $button__line-height;
color: $button__text-color;
cursor: pointer;
text-transform: $button__text-transform;
text-decoration: $button__text-decoration;
transform: $button__transform;
transition: $button__transition;
&:hover {
background-color: $button__background-hover;
text-decoration: $button__text-decoration-hover;
opacity: 0.9;
&:before {
display: $button__before-display-hover;
transform: $button__before-transform-hover;
border-radius: $border-radius;
}
&:after {
display: $button__after-display-hover;
left: $button__after-position-left-hover;
opacity: $button__after-opacity-hover;
}
}
&:disabled,
&[disabled] {
background-color: $button__background-disabled;
border-color: $button__background-disabled;
color: $button__text-color;
cursor: not-allowed;
.icon {
fill: $button__text-color;
}
&:hover {
background-color: $button__background-disabled;
//&:before,
//&:after {
// display: none;
//}
}
}
&--light {
font-weight: $button__font-weight--light;
text-transform: $button__text-transform--light;
}
&--secondary {
color: $button__color--secondary;
background-color: $button__background--secondary;
border: $button__border--secondary;
&:hover {
color: $button__color-hover--secondary;
background-color: $button__background-hover--secondary;
}
}
&--secondary-light {
@extend .button--secondary;
@extend .button--light;
}
&--fluid {
width: 100%;
}
&--link {
color: $button__color--link;
background: $button__background--link;
text-transform: $button__text-transform--link;
text-decoration: $button__text-decoration--link;
&:hover {
color: $button__color-hover--link;
background: $button__background-hover--link;
//&:before {
// display: $button__before-display-hover--link;
//}
//&:after {
// display: $button__after-display-hover--link;
//}
}
}
&--icon {
min-width: $button__min-size;
min-height: $button__min-size;
padding: $button__padding--icon;
background-color: $button__bg--icon;
.icon,
.button__icon {
width: $button__icon-size;
height: $button__icon-size;
padding: $icon__padding;
fill: $button__icon-fill;
transition: $button__icon-transition;
z-index: $button__icon-z-index;
pointer-events: none;
}
.button__text {
margin: $button__text-margin--icon;
color: $button__text-color--icon;
font-weight: $button__font-weight--icon;
text-transform: $button__text-transform--icon;
transition: $button__transition;
z-index: $button__text-z-index;
pointer-events: none;
}
&:hover {
background-color: $button__background-hover--icon !important; //sass-lint:disable-line no-important
//&:after {
// display: none;
//}
.icon,
.button__icon {
fill: $button__icon-fill-hover--icon;
}
.button__text {
color: $button__text-color-hover--icon;
}
}
}
&--icon-light {
&:before {
background-color: $button__before-background--icon-light;
}
&:hover {
//background-color: $button__background-hover--icon-light;
.icon,
.button__icon {
fill: $button__icon-fill-hover--icon-light;
}
.button__text {
color: $button__text-color-hover--icon-light;
}
}
}
&--icon-border {
border: $button__border--icon-border;
background-color: $button__background--icon-border;
&:hover {
background-color: $button__background-hover--icon-border;
border: $button__border-hover--icon-border;
}
}
&--rotate-icon {
&:before {
background-color: $button__before-background--rotate-icon;
}
&:hover {
background-color: $button__background-hover--rotate-icon;
&:after {
display: none;
}
.icon {
fill: $button__icon-fill-hover--rotate-icon;
transform: $button__transform-hover--rotate-icon;
}
}
}
&--icon-fill {
background: $button__background--icon-fill;
&:before {
background-color: $button__before-background--icon-fill;
z-index: $button__icon-after-z-index--icon-fill;
}
&:hover {
@include button-fill-bg();
background-color: $button__background-hover--icon-fill;
}
}
&--icon-filled {
@include button-fill-bg();
}
&--add-to {
overflow: hidden;
@include add-to-button(block);
@include mq($screen-m) {
@include add-to-button(none);
}
&:before {
display: $button__before-display--add-to;
}
&:after {
top: $button__after-position-top--add-to;
left: $button__after-position-left--add-to;
transform: $button__after-transform--add-to;
}
.button__icon {
fill: $white;
}
//&:hover {
// &:after {
// transform: $button__after-transform-hover--add-to;
// }
//}
}
&--no-hover-bg {
&:hover {
background-color: #fff;
opacity: 1;
.icon,
.button__icon {
fill: $button__text-color--icon;
}
.button__text {
color: $button__text-color--icon;
}
}
}
&--dark {
background-color: #555;
.icon,
.button__icon {
fill: #fff;
}
.button__text {
color: #fff;
}
&:hover {
background-color: #555;
opacity: 1;
.icon,
.button__icon {
fill: #fff;
}
.button__text {
color: #fff;
}
}
}
}
//use .button-extend for wrappers that contains buttons without .button class that should have .button styles
.button-extend {
[type="button"],
[type="submit"] {
@extend .button;
}
}
button--secondarybutton--secondary-lightbutton--iconbutton--icon button--icon-lightbutton--icon button--icon-borderbutton--icon button--icon-rotate - mostly used for button icon closebutton--icon button--icon-fill - used for wishlist buttonbutton--icon button--add-tobutton--linkbutton--fluid - 100% widthbutton[disabled]To every button--icon we can add the text - it should be inside the span with class button__text, checkout components/Molecules/button/button--icon.hbs for more details.
IMPORTANT! All buttons that don’t have text inside (labels) and have only graphic representation, usage or aria-label or aria-labelledby is mandatory! Text inside aria label should be informative and should explain what the button is for.