JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" target="_blank" class="glitch-btn">
<div class="label">PULSE</div>
<div class="mask"><span>Coming soon</span></div>
<div class="mask"><span>Coming soon</span></div>
<div class="mask"><span>Coming soon</span></div>
<div class="mask"><span>Coming soon</span></div>
<div class="mask"><span>Coming soon</span></div></a>
CSS
@-webkit-keyframes jitter-20-20-8 {
100% {
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
95% {
-webkit-transform: translate(0.2px, 0.1px);
transform: translate(0.2px, 0.1px);
}
90% {
-webkit-transform: translate(0.9px, 0.3px);
transform: translate(0.9px, 0.3px);
}
85% {
-webkit-transform: translate(-0.3px, 0px);
transform: translate(-0.3px, 0px);
}
80% {
-webkit-transform: translate(0.4px, 0px);
transform: translate(0.4px, 0px);
}
75% {
-webkit-transform: translate(-2px, 1px);
transform: translate(-2px, 1px);
}
70% {
-webkit-transform: translate(-0.6px, 0.3px);
transform: translate(-0.6px, 0.3px);
}
65% {
-webkit-transform: translate(2.45px, 1.4px);
transform: translate(2.45px, 1.4px);
}
60% {
-webkit-transform: translate(2.4px, 0.4px);
transform: translate(2.4px, 0.4px);
}
55% {
-webkit-transform: translate(-0.45px, 0px);
transform: translate(-0.45px, 0px);
}
50% {
-webkit-transform: translate(-1.5px, 1.5px);
transform: translate(-1.5px, 1.5px);
}
45% {
-webkit-transform: translate(-4.4px, -1.65px);
transform: translate(-4.4px, -1.65px);
}
40% {
-webkit-transform: translate(-4.8px, 1.8px);
transform: translate(-4.8px, 1.8px);
}
35% {
-webkit-transform: translate(2.6px, 0px);
transform: translate(2.6px, 0px);
}
30% {
-webkit-transform: translate(-5.6px, 2.1px);
transform: translate(-5.6px, 2.1px);
}
25% {
-webkit-transform: translate(5.25px, -1.5px);
transform: translate(5.25px, -1.5px);
}
20% {
-webkit-transform: translate(2.4px, -2.4px);
transform: translate(2.4px, -2.4px);
}
15% {
-webkit-transform: translate(-4.25px, -2.55px);
transform: translate(-4.25px, -2.55px);
}
10% {
...