.Button {
position: relative;
display: inline-block;
text-decoration: none;
max-width: @input-width;
width: 100%;
padding: @input-padding-vertical - 1px @input-padding-vertical;
text-align: center;
font-size: 16px;
line-height: 1.5625;
font-weight: 500;
text-transform: capitalize;
border: 1px solid transparent;
background: @dark-bg-gradient;
color: #ffffff;
cursor: pointer;
z-index: 1;
overflow: hidden;
transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
@media (max-width: @mobile) {
max-width: 100%;
}
&:after {
content: "";
position: absolute;
background: #ffffff;
width: calc(~"100% - 2px");
height: calc(~"100% - 2px");
left: 1px;
top: 100%;
z-index: -2;
transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
}
&:hover{
color: @main-dark-color;
border: 1px solid @main-dark-color;
}
&:hover:after {
top: 1px;
}
}
.Button_blue {
color: #ffffff;
background: @accent-color;
&:after {
background: #ffffff;
}
&:hover{
color: @accent-color;
border-color: @accent-color;
}
}
.Button_transparent {
background: transparent;
border: 1px solid #ffffff;
&:after {
background: #ffffff;
}
&:hover{
color: @main-dark-color;
border: 1px solid transparent;
}
}
.Button_white {
color: @main-dark-color;
background: #ffffff;
&:after {
background: @dark-bg-gradient;
}
&:hover{
color: #ffffff;
border: 1px solid #ffffff;
}
}
Last active
July 4, 2018 15:43
-
-
Save Shalomeev/bb910ff1de1243758d34bbe67931f09d to your computer and use it in GitHub Desktop.