Source: reel-mensch-2016, main.scss
a.button{
font-size: 18.5px;
display: inline-block;
background: $main_accent;
color: #ffffff;
text-decoration: none;
font-weight: 500;
padding: 11px 23px;
margin-top: 15px;
position: relative;
-webkit-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
a.button:hover{
background: $accent_hover;
}
a.button.nuka{
background: none;
margin-left: 5px;
}
a.button.nuka:hover{
background: none;
color: $main_accent;
}
a.button.nuka:before,
a.button.nuka:after{
// display: block;
// content: '';
// width: 70%;
// height: 121%;
// position: absolute;
// z-index: -1;
// left: 15%;
// top: -11%;
// background: #C3E8E9;
// background: rgba(21, 163, 172, 0.15);
content: '';
position: absolute;
border-radius: inherit;
background: $main_accent;
z-index: -1;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
a.button.nuka:before {
top: -4px;
bottom: -4px;
left: -4px;
right: -4px;
opacity: 0.2;
-webkit-transform: scale3d(0.7, 1, 1);
transform: scale3d(0.7, 1, 1);
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
a.button.nuka:after {
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scale3d(1.1, 1, 1);
transform: scale3d(1.1, 1, 1);
-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
transition: transform 0.3s, background-color 0.3s;
}
a.button.nuka:hover::before {
opacity: 1;
}
a.button.nuka:hover::after {
background-color: #fff;
}
a.button.nuka:hover::after,
a.button.nuka:hover::before {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}