Vibeset

Glass button

A button that looks like a piece of cut glass, with a light that moves with where you put the pointer. It is CSS with one detail of JavaScript: two numbers. The pointer writes its position inside the button into two variables and nothing else. The face sheen is a radial gradient centred there; the edge sheen is another gradient set as the border background, with two background layers (padding-box for the face, border-box for the rim) and a transparent border: no extra elements and no loop. With no pointer the light returns to a rest spot at the top and middle, where a lamp would hang, so it never looks flat. Pressed it sinks a pixel with :active, which covers mouse, finger and Space. It is a real button or a, and under forced colours it becomes the system button.

And the React Bits original: Specular Button

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Specular Button, and this is what we saw in theirs in case you prefer to use the original.

When to use it

For the main call to action on a landing, just one. Over a dark or coloured background, where glass shows.

Watch out for

Every button carries its own WebGL canvas: two or three are fine, twenty are not.

Accessibility

It respects the system reduced-motion setting and accepts button attributes, so you control the accessible name and the type.