CSS
.cle-neonblink {
display: inline-block;
padding: 6px 18px;
color: #ff6c8a;
font:
700 17px/1.2 "Courier New",
monospace;
letter-spacing: 0.18em;
text-decoration: none;
text-shadow: 0 0 8px rgba(255, 108, 138, 0.4);
border: 1.5px solid rgba(255, 108, 138, 0.4);
border-radius: 4px;
background: #15081a;
transition:
color 0.2s,
border-color 0.2s,
background 0.3s;
}
.cle-neonblink:hover,
.cle-neonblink:focus-visible {
color: #ffe1ea;
border-color: #ff6c8a;
background: #1f0d24;
animation: cle-neonblink-flicker 1.1s steps(1, end);
}
@keyframes cle-neonblink-flicker {
0% {
opacity: 1;
text-shadow: none;
}
3% {
opacity: 0.2;
text-shadow: none;
}
6% {
opacity: 1;
text-shadow:
0 0 14px #ff6c8a,
0 0 4px #fff;
}
10% {
opacity: 0.4;
text-shadow: none;
}
13% {
opacity: 1;
text-shadow:
0 0 14px #ff6c8a,
0 0 4px #fff;
}
18% {
opacity: 0.1;
text-shadow: none;
}
22% {
opacity: 1;
text-shadow:
0 0 14px #ff6c8a,
0 0 4px #fff;
}
35% {
opacity: 0.5;
text-shadow: 0 0 8px #ff6c8a;
}
38% {
opacity: 1;
text-shadow:
0 0 18px #ff6c8a,
0 0 6px #fff;
}
55% {
opacity: 0.6;
text-shadow: 0 0 6px #ff6c8a;
}
58% {
opacity: 1;
text-shadow:
0 0 22px #ff6c8a,
0 0 8px #fff;
}
100% {
opacity: 1;
text-shadow:
0 0 22px #ff6c8a,
0 0 8px #fff;
}
}
@media (prefers-reduced-motion: reduce) {
.cle-neonblink:hover,
.cle-neonblink:focus-visible {
animation: none;
text-shadow:
0 0 22px #ff6c8a,
0 0 8px #fff;
}
}