Buttons¹¹

A thin outline and a soft fill on hover, easing in and out at the same speed. The menu style of natnu.design.

A conic gradient turns around the edge while a blurred copy glows behind it. Pure CSS with an animatable @property angle.

Leans towards the pointer as soon as it comes close – the label travels further than the body, which gives it depth.

A band of light glides across the surface – on hover, or on a gentle loop for the one action that matters.

Frosted glass with a strong blur and a specular highlight that follows the pointer. Needs something colorful behind it.

A key with real depth: rises a little on hover, sinks all the way when pressed. Shadows are mixed from the base color.

Ink spreads from the exact point of contact. Keyboard presses ripple from the center.

For actions that should never happen by accident. Hold with pointer, Space or Enter – letting go early drains the fill.

Shrinks into a spinner, then into the result. Busy state and outcome are announced to screen readers.

Every letter rolls over on hover, one after another. Screen readers hear the plain label once.

The arrow leaves, a fresh one slides in and the gap opens up – a small promise that something happens next.