Pixel button

What's included

A black pill button ringed by a green beam that sweeps around it, and which lights up a grid of 495 small squares on hover: they grow out from the centre, twinkle, then dissolve when the pointer leaves. Two files plus the font — no dependencies, no build step, no external requests.

The component builds no element: it enhances the <button> or the <a> it finds, and adds a single thing to it, the grid's canvas. The rest — the pill, the outline, the beam, its widening on hover, the glow, the text outline — lives entirely in the stylesheet.

Features

• Complete without JavaScript — without the script, only the grid is missing. The beam still sweeps, the glow still lights up, the button is still a button.
• The keyboard sees the same thing — Tab triggers the beam, the glow and the grid, and draws a focus ring. The original model only responded to the mouse.
• A ripple on click — a ring crosses the grid from the point clicked and swells the squares in its path, while the grid brightens.
• One variable for the scale — padding, corner radius, glow and text outline all derive from the text size and follow together.
• Two modes — the grid responds to hover, or twinkles permanently with data-pixel-button="always".
• Five skins — green, red, amber, magenta, and a version for light backgrounds. Each is nothing more than a handful of variables.

Dropping it into a page

Two files to load, then the usual markup:

<link rel="stylesheet" href="pixel-button.css">
<script src="pixel-button.js" defer></script>
<button class="pixel-button" type="button" data-pixel-button>
  <span class="pixel-button__label">Get unlimited access</span>
</button>

The data-pixel-button attribute is enough: the component installs itself when the page loads. The <span> isn't decorative — it carries the text outline and the layer above the grid. Copy the font file next to the CSS as well: the button's width depends on it directly.

What you should know

• The grid doesn't grow with the button. Doubling the text size adds squares rather than enlarging them — that's the model's behaviour, and it's the right one: an enlarged grid is no longer a grid. Two variables allow the opposite if you prefer.
• The permanent mode takes up an animation frame. It's made for the main button on a page, not for a grid of ten. At rest, in hover mode, the component costs nothing: the loop stops by itself.
• No inline styles, no inline scripts. The component honours the site's strict security policy and never uses innerHTML — checked by serving the folder over HTTP with the header, not assumed.
• The design comes from elsewhere. The proportions and the animation curves follow those of a Framer code component, measured on the original page: geometry to 0.000 px of difference, text width at 144.000 px against 144. The detail of the measurements and of the eight deliberate departures is in the README.md.