Hard & Offset HRD · 16
One property does most of the work: a box-shadow with zero blur, always offset down and right. Hover shortens it, pressing collapses it to nothing so the button lands flat on the page.
Push & Depth PSH · 15
Depth you can press. The solid bottom edge and the travel distance are the same number, so :active moves the face down exactly as far as the edge is tall.
Arcade & Toy ARC · 12
Cabinet plastic and console chrome. Long travel, saturated colour, and the occasional scanline. Best used once per page, on the thing you actually want pressed.
Borders & Edges BRD · 18
Everything happens at the perimeter. Gradient borders layer two backgrounds, one clipped to padding-box and one to border-box. Animated ones spin a conic gradient behind a solid core.
Fills & Sweeps FIL · 18
A pseudo-element scaled from zero, revealed on hover. Move the transform-origin and the same six lines become a completely different button.
Glow & Neon GLW · 12
Colour used as light rather than fill. Layered box-shadows make the halo, text-shadow makes the tube. These need a dark ground to read.
Glass & Soft GLS · 12
backdrop-filter blurs whatever sits behind, so these only exist in context (shown here over a gradient). The bright inset top edge is what sells it as a physical pane.
Type & Motion TYP · 16
The label is the interface. Duplicated text through attr(data-t), arrows that arrive on hover, stroke-only letterforms, and a caret that will not stop blinking.
Material & Novelty MAT · 16
Surfaces and jokes. Foil, chrome, riso misregistration, washi tape, plus a few that exist purely to be pressed a second time.