HTML + CSSButtons
Pixel fill button
An outlined button whose background fills in with square pixels that pop in out of order.
Settings
16px
1x
Code
<button class="uv-pxf"><span class="g" aria-hidden="true"><b style="--d:0.00s"></b><b style="--d:0.18s"></b><b style="--d:0.27s"></b><b style="--d:0.39s" class="b2"></b><b style="--d:0.36s"></b><b style="--d:0.29s"></b><b style="--d:0.09s"></b><b style="--d:0.27s"></b><b style="--d:0.28s"></b><b style="--d:0.13s"></b><b style="--d:0.41s" class="b2"></b><b style="--d:0.21s"></b><b style="--d:0.25s"></b><b style="--d:0.38s"></b><b style="--d:0.16s"></b><b style="--d:0.32s"></b><b style="--d:0.19s"></b><b style="--d:0.08s" class="b2"></b><b style="--d:0.41s"></b><b style="--d:0.31s"></b><b style="--d:0.36s"></b><b style="--d:0.36s"></b><b style="--d:0.13s"></b><b style="--d:0.08s"></b><b style="--d:0.00s" class="b2"></b><b style="--d:0.29s"></b><b style="--d:0.16s"></b><b style="--d:0.00s"></b><b style="--d:0.34s"></b><b style="--d:0.10s"></b><b style="--d:0.28s"></b><b style="--d:0.34s" class="b2"></b><b style="--d:0.35s"></b><b style="--d:0.10s"></b><b style="--d:0.06s"></b><b style="--d:0.22s"></b><b style="--d:0.19s"></b><b style="--d:0.28s"></b><b style="--d:0.32s" class="b2"></b><b style="--d:0.21s"></b><b style="--d:0.18s"></b><b style="--d:0.23s"></b><b style="--d:0.33s"></b><b style="--d:0.25s"></b><b style="--d:0.39s"></b><b style="--d:0.37s" class="b2"></b><b style="--d:0.18s"></b><b style="--d:0.00s"></b></span><span class="t">Play now</span></button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Buttons
See all ButtonsWhere to use it
This button nods to 8-bit games and digital art: 48 pixels sit hidden behind the label and each one switches on after its own short delay, so the fill looks scattered rather than swept. A few pixels use the second color, adding sparkle. It suits game studios, pixel art shops, hackathons and retro tech brands.
Moving the mouse away clears the pixels in the same random order. Square corners keep the arcade feel, and a bold, slightly spaced label holds up well on the busy fill without needing a shadow.