Every one runs live, with a step-by-step explanation and code you can edit and paste into your own project.
Inside its field the button shifts and leans toward the pointer while its label floats higher, so the two slide apart. JS only reports the pointer position; release it and a springy transition takes it home.
Press it. The edge is a generated box-shadow stack that collapses on :active.
The button is a bar with two faces; hover rolls the second one into view.
A real checkbox underneath: click, tap or press Space. The rocker tips on :checked.
At rest it is only its Menu bar. Hover or focus it: the items swing down from their top edge, one after another.
Pointer-following tilt without JavaScript: nine invisible hover zones steer the card.
JS writes the pointer position into custom properties; CSS turns them into tilt, pop-out and glare.
Each checkbox is a small glass cube with the tick on its bottom face. :checked rolls the cube a quarter turn forward; the inputs are real, so keyboard and forms just work.
The tab panels are the four long sides of a prism. Radio inputs and labels pick a tab; each one sets a step count and the prism turns to that face.
A floating action button built from a checkbox and its label. Closed, it is only the + button; checked, its five actions walk out along their spokes into a ring round it, coming forward one after another.
Mechanical keycaps with sloped sides on a tilted plate. Hover or focus a key and its cap sinks into the plate with a glow; the button itself never moves, only the cap inside it.
A quantity stepper whose number sits on a cube. − and + roll it a quarter turn down or up; just before each turn JS writes the new number onto the face that is about to come into view.
Five thin star plates, each a front and a gold back with an edge between them. Radio inputs and labels choose a rating, and every star up to it flips over, one after another.
A chunky switch whose knob is a real cube. Checked, it tips over its right-hand edge onto the other half of the track, bringing the moon face up, and the track changes colour.
A volume dial: a thick knurled cylinder seen from a little above, a ring of ticks round it and a readout under it. Drag on it (or press the arrow keys) and JS writes one number, the angle; CSS turns the cap and fills the arc from that same number.
A real range input laid on a dark deck seen from above: a block-shaped thumb rides in a recessed groove, and behind it ten bars rise one after another to the value, teal to pink. JS writes one plain number, the value; CSS places the thumb and raises every bar from it.
A steel lever with a pink knob on a dark wall plate, seen from the side. Click it (or press Space) and the arm swings down through the air about its axle, and the amber lamp on the plate lights. A real checkbox and its label, no JavaScript.
A violet combination padlock with three number wheels, each a drum of ten faces that rolls in 3D under its arrow keys. Set the code shown under it and the steel shackle springs up and swings open; turn any wheel off it and the shackle swings back and drops shut.