Live as of .
Hover the button below.
button by Galahhad, via Uiverse.io
I saw this button on UIverse which is a very cool corner in the internet, that I would not have found without this journey.
The code is relatively simple once you understand it, but I love the combination of ideas that came together here on this "glitch" button.
New ideas come into this world somewhat like falling meteors, with a flash and explosion. - Henry David Thoreau
The animation comes from the original button, credited above — I restyled it to sit inside this site's palette. The mechanism: content on a pseudo-element can be keyframed but not interpolated, so each frame of static is hand-written, not tweened:
@keyframes resolve {
0% { content: "#"; }
50% { content: "?2@%"; }
100% { content: ""; }
}
Twenty hand-written frames dissolve to nothing, leaving the real <span> text — recolored to the accent yellow — standing underneath. No JavaScript, just timed content swaps.