Pixel Button

Original scale

The button as it was drawn: 226 × 58 pixels, 16 px text. Hover over it — the beam widens and moves back, the glow rises from the bottom, the grid opens out from the centre. Click: a wave crosses the grid and makes it swell as it passes.

Two modes

By default the grid responds to hover. Setting data-pixel-button="always" makes it shimmer permanently: keep that for the one button on a page, because an animation that never stops ends up being ignored.

Button or link

The component does not create an element: it enhances the one it finds. On an <a href>, navigation, middle-click, "open in a new tab" and the context menu all keep working — which a <div> with a click listener cannot do.

Colours

Each variant is a handful of variables: the beam, the glow and the three tints of the grid. The values are those of the themes the original component carries.

On a light background the reference swaps the fill, the outline and the ink, and leaves the beam as it is. The text outline follows --pxb-bg on its own: it turns white, and the label stays legible over the grid.

A single variable for the scale

Every measurement is in em: --pxb-font-size resizes the whole button, padding, radius, glow and text outline included. The grid, for its part, keeps its 5 px pitch: it is a texture, and an enlarged texture is no longer one. The last two buttons show the difference.

States

The keyboard gets what the mouse gets: reach the first button with Tab — the focus ring appears, and the beam, the glow and the grid respond as they do on hover. The disabled button responds to nothing.