Overview
Four hairline strips are parked just outside the edges of a dark rectangle, each one running longer than the side it borders and brightest where it touches it. Every strip paints two blurred copies of itself behind the button and pushes them through a filter that multiplies their alpha, which is what turns a blur into light instead of a smear. A dot matrix lies over the whole glow and under the face, so the light reads through a screen door rather than as a flat halo. On hover the wider blur fades up and the face picks up a dotted sheen. The glow colour, its reach, its bloom and the strength of the filter are all sliders, so the same button covers a restrained dark-mode call to action and a full arcade sign.
Highlights
- No runtime — markup, one stylesheet and an inline SVG filter
- Glow colour, reach, bloom and alpha gain as sliders
- Idle and hover states, both holdable in the editor
- A real button, operable from the keyboard
- Label clears WCAG AA on both tones whatever the glow colour
- Reduced-motion fallback