Static


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

Building this

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.