pressable.css

A tactile button surface. No JavaScript, no dependencies. Try the pills.

Token playground

Press and hold either pill while dragging --pressable-press-scale. The default 0.989 is measured, not chosen.

Ordinary button, hold to preview the press

The press preview is the same appearance as the persistent state below, offset included.

Toggle with persistent aria-pressed

Press the already-pressed one. The surface has nowhere to go, so the scale is all you see.

Presence-form data-pressed

Component libraries usually emit a valueless attribute. All three forms resolve correctly.

SVG icon

Both SVGs carry width="24" height="24", larger than the 20px slot. .pressable__icon sizes them down; without that rule they would overflow.

Current page link

aria-current with an empty value is not styled as current. ARIA treats it as false, and <a aria-current> parses to exactly that.

Disabled, native, cannot activate

aria-disabled is a styling hook. The consumer must suppress activation; only native disabled does that for you.

Long label

Bare text node on a coloured ancestor

Dark preset, on its own

Six tokens on an ancestor. The buttons carry no CSS of their own.

Geometry overrides

Row clearance

The rows at the top take up their clearance in layout, so they overlap nothing. Add .pressable-row--bleed and the pills sit flush with the container edge instead, at the cost of the row's box overlapping whatever is above and below it.