Bring the cursor close and the button drifts toward it on a damped spring — no overshoot, no wobble. The label trails slightly behind the button itself: that lag is what reads as elastic, without it the button would just slide as one dead block.
On hover, a fill sweeps out from the exact point the cursor crossed the edge, and the label flips colour with it. On click, a light press-down.
Still a real button (or a real link): reachable by keyboard, with a visible focus ring, no JavaScript involved in the hover or focus state — that part is plain CSS, so it behaves exactly the same with a mouse or a keyboard.
DOM and requestAnimationFrame, no dependencies, nothing loaded from outside. Honours prefers-reduced-motion. Free.
Bring the cursor close and the button drifts toward it on a damped spring — no overshoot, no wobble. The label trails slightly behind the button itself: that lag is what reads as elastic, without it the button would just slide as one dead block.
On hover, a fill sweeps out from the exact point the cursor crossed the edge, and the label flips colour with it. On click, a light press-down.
Still a real button (or a real link): reachable by keyboard, with a visible focus ring, no JavaScript involved in the hover or focus state — that part is plain CSS, so it behaves exactly the same with a mouse or a keyboard.
DOM and requestAnimationFrame, no dependencies, nothing loaded from outside. Honours prefers-reduced-motion. Free.
