A dark button lit from outside by four neon strips, read through a dot matrix.
About this tool
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.
UI/UX · HTML / CSS · All tools