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;
}
}