<a href="#" class="glitch" data-glitch="Explore">Explore</a>

body {
  background-color: #232323;
}

.glitch {
  font: {
    size: 8.125em;
    family: 'Raleway', sans-serif;
    weight: 700;
  }
  text-decoration: none;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff;
  letter-spacing: 5px;
  
  &:before, &:after {
    display: block;
    content: attr(data-glitch);
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .8;
  } &:after {
    color: #f0f;
    z-index: -2;
  } &:before {
    color: #0ff;
    z-index: -1;
  }
  &:hover {
    &:before {
      animation: glitch .3s cubic-bezier(.25, .46, .45, .94) both 5
    }
    &:after {
      animation: glitch .3s cubic-bezier(.25, .46, .45, .94) reverse both 5
    }
  }
}

@media only screen and (max-width: 400px) {
  .glitch {
    font-size: 3em;
  }
}


@keyframes glitch {
  0% {
    transform: translate(0)
  }
  20% {
    transform: translate(-5px, 5px)
  }
  40% {
    transform: translate(-5px, -5px)
  }
  60% {
    transform: translate(5px, 5px)
  }
  80% {
    transform: translate(5px, -5px)
  }
  to {
    transform: translate(0)
  }
}