Glitch Button Hover

by kthornbloom

HTML

<div class="dark">

<a href="#"><span>Hello</span></a>

</div>

<div class="light">

<a href="#"><span>Hello</span></a>

</div>

CSS

a:link, a:visited {
  background: #000;
  padding: 2rem;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
}

a:hover {
  background: rgb(255,0,0);
   animation: glitch3 1s infinite step-end;
}

a:hover span {
  color: #000;
  position: relative;
  z-index: 2;
}

a:hover::after {
  animation: glitch1 1s infinite step-end;
  content:'';
  background: rgb(0,0,255);
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: 2px;
  left: 2px;
  mix-blend-mode: screen;
}

a:hover::before {
    animation: glitch2 2s infinite step-end;
  content:'';
  background: rgb(0,255,0);
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  top: -2px;
  left: -2px;
  mix-blend-mode: screen;
}

body {
  font-family: sans-serif;
  font-weight: bold;
}

.dark {
  background: #222;
  padding: 3rem;
}

.light {
  background: #fff;
  padding: 3rem;
}

@keyframes glitch1 {
  0% {transform: translate(0px, 0px)}
  10% {transform: translate(2px, 2px)}  
  20% {transform: translate(-2px, -2px)}  
  30% {transform: translate(-2px, 3px)}  
  35% {transform: translate(-1px, 3px)}
  60% {transform: translate(-2px, 1px)}
  80% {transform: translate(-1px, -1px)}
  90% {transform: translate(-1px, 0px)}
  100% {transform: translate(-2px, 1px)}
}

@keyframes glitch2 {
  0% {transform: translate(4px, 0px)}
  5% {transform: translate(2px, -2px)}  
  20% {transform: translate(1px, -1px)}  
  30% {transform: translate(2px, 1px)}  
  36% {transform: translate(0px, 2px)}
  42% {transform: translate(-1px, -1px)}
  82% {transform: translate(0px, -2px)}
  90% {transform: translate(1px, -1px)}
  100% {transform: translate(-21px, -1px)}
}

@keyframes glitch3 {
  0% {transform: skew(0deg)}
  90% {transform: skew(-5deg)}
  94% {transform: skew(0deg)}
  98% {transform: skew(-5deg)}
  100% {transform: skew(0deg)}
}