A Pen by Zhye

Thumbnail
This awesome code was written by Zhye, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Zhye ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Zhye</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <a href="#" class="glitch">Who said it would be easy</a>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Zhye/a-pen-by-zhye-wpgbWZ */
body {
  background-color: #000000;
  color: #333131;
}

.glitch {
  font-size: 24px;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-decoration: none;
  color: #333131;
}
.glitch:before, .glitch:after {
  display: block;
  content: 'Who said it would be easy';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: .8;
}
.glitch:after {
  color: #f0f;
  z-index: -2;
}
.glitch:before {
  color: #0ff;
  z-index: -1;
}
.glitch:hover:before {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}
.glitch:hover:after {
  animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}

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

Comments