SCSS
html, body {
background-color: #071829;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.button {
text-decoration: none;
text-transform: uppercase;
font-family: 'Exo 2', sans-serif;
font-weight: 300;
font-size: 30px;
letter-spacing: 4px;
display: inline-block;
position: relative;
text-align: center;
color: #2ecc71;
border: 1px solid #2ecc71;
line-height: 3em;
padding-left: 3em;
padding-right: 3em;
box-shadow: 0 0 0 0 transparent;
transition: all 0.2s ease-in;
}
.button:hover {
color: white;
box-shadow: 0 0 30px 0 #2ecc71;
background-color: #2ecc71;
transition: all 0.2s ease-out;
}
.button:hover:before {
animation: shine 0.5s 0s linear;
}
.button:active {
box-shadow: 0 0 0 0 transparent;
transition: box-shadow 0.2s ease-in;
}
.button:before {
content: '';
display: block;
width: 0px;
height: 86%;
position: absolute;
top: 7%;
left: 0%;
opacity: 0;
background: white;
box-shadow: 0 0 15px 3px white;
transform: skewX(-20deg);
}
@keyframes shine {
from {
opacity: 0;
left: 0%;
}
50% {
opacity: 1;
}
to {
opacity: 0;
left: 100%;
}
}
