Component · without JavaScript
Pixel Button
This page loads pixel-button.css and not
pixel-button.js. The button is not degraded: it is the
same button, minus the grid of pixels.
What still works
The pill, the outline, the fill, the text outline, the rotating beam, its widening on hover and the glow rising from the bottom: all of that is CSS. Hover over it, then reach the button with Tab — both respond.
What is missing
The grid of a few hundred squares, and that alone: a canvas is drawn in JavaScript, there is no other way to do it. Also missing is the slowing of the beam during hover — CSS cannot change the speed of a running animation without making the angle jump, so it turns at a constant speed.
The rest depends on nothing: a screen reader announces a button, a form submits it, a middle-click on the link variant does open a tab.