Back to CSS Link Effects Glitch Split Pure CSS
Share
HTML
<a href="#" class="cle-glitch" data-text="System.exit(0)">System.exit(0)</a>
CSS
.cle-glitch {
  position: relative;
  display: inline-block;
  color: #f0eeff;
  font:
    700 16px/1.2 ui-monospace,
    monospace;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.cle-glitch:hover,
.cle-glitch:focus-visible {
  animation: cle-glitch-shake 0.35s steps(2) infinite;
  text-shadow:
    2px 0 #ff3d6e,
    -2px 0 #00e5ff,
    0 0 12px rgba(255, 255, 255, 0.2);
}
@keyframes cle-glitch-shake {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1px, 1px);
  }
  50% {
    transform: translate(1px, -1px);
  }
  75% {
    transform: translate(-1px, -1px);
  }
  100% {
    transform: translate(1px, 1px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cle-glitch:hover,
  .cle-glitch:focus-visible {
    animation: none;
  }
}