SCSS
$dark: #15171E;
$white: mix($dark, white, 20%);
$red: #FD0000;
$citron: #FDFD00;
$purple: #A0038B;
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
display: flex;
font-family: 'Roboto Mono', sans-serif;
background-color: $dark;
}
.discoBtn {
position: relative;
display: inline-block;
margin: auto;
padding: 1rem 1.9rem;
color: white;
font-size: 1.5rem;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 3px;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 3px solid transparent;
transition: border-width 0.25s;
border-image: linear-gradient(135deg,$purple, $red, $citron);
border-image-slice: 1;
pointer-events: none;
filter: hue-rotate(0deg);
animation: 0.5s linear 0s infinite normal both paused hueShift;
}
&:hover:before {
border-width: 7px;
animation-play-state: running;
}
}
@keyframes hueShift {
100% { filter: hue-rotate(360deg); }
}
