SCSS
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #141E30;
background: -webkit-linear-gradient(to left, #141E30 , #243B55);
background: linear-gradient(to left, #141E30 , #243B55);
}
.btn-crazy {
display: inline-block;
padding: 1rem 3rem;
font-family: 'Raleway', sans-serif;
font-weight: 700;
text-decoration: none;
font-size: 2rem;
line-height: 4.5rem;
color: #222;
background-image:
linear-gradient(#3498db, #3498db),
linear-gradient(#27ae60, #27ae60),
linear-gradient(#e74c3c, #e74c3c);
background-blend-mode: screen;
background-repeat: no-repeat;
background-size: 85%;
background-position: 50% 50%;
animation: go-crazy 10s infinite alternate-reverse;
&:hover { animation-play-state: paused; }
}
@keyframes go-crazy {
@for $i from 0 through 100 {
#{$i * 1%} {
background-position:
random(100)*1% random(100)*1%,
random(100)*1% random(100)*1%,
random(100)*1% random(100)*1%;
}
}
}
