SCSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
background-color: #333;
}
.button-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn {
display: block;
height: 50px;
width: 186px;
position: relative;
overflow: hidden;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 4px;
color: #333;
font-size: 14px;
text-align: center;
&:after {
position: absolute;
content: '';
display: inline-block;
background: rgba(59, 173, 222, 1);
background: linear-gradient(45deg,
rgba(239,50,217,1) 0%,
rgba(137,255,253,1) 92%,
rgba(137,255,253,1) 100%);
height: 50px;
width: 372px;
z-index: -1;
transform: translateX(-280px);
transition: transform .3s ease-in;
}
&:hover {
&:after { transform: translateX(-200px); }
}
span {
position: relative;
top: 16px;
}
}
