SCSS
html {
height: 100%;
width: 100%;
}
body {
background: #222;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
@keyframes sparkle {
from {
background-position: 0% 100%;
}
to {
background-position: 200% 100%;
}
}
.btn {
background: white;
border: none;
display: inline-block;
padding: 1.2em 2em;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
border-radius: 4px;
position: relative;
cursor: pointer;
&:before {
animation: sparkle 4s infinite linear;
background: linear-gradient(
90deg,
#2ecc71 0%,
#3498db 11%,
#e74c3c 22%,
#2ecc71 33%,
#3498db 44%,
#e74c3c 55%,
#2ecc71 66%,
#3498db 77%,
#e74c3c 88%,
#7FEFBD 100%
);
background-size: 300% 100%;
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 4px;
filter: blur(3px);
z-index: -1;
transform: scale(0.99) translateY(3px);
}
&:focus {
outline: none;
}
}
