Clip Path Buttons

Three tinted action buttons that respond to hover and press with a spring, so the tap feels physical rather than instant.

The idea

Clip Path Buttons exists to make one state change legible. The interaction starts where the user's attention already is, and ends somewhere they expected to land.

Motion earns its place when it explains state. Everything else is noise in a nice suit.

How it works

A spring with high stiffness and moderate damping does most of the work. No timelines, no keyframes — just two states and a transition between them, so the component stays readable months later.

Everything is driven by React state. Hover, tap, and layout changes are declared on the element itself, which means the animation cannot drift out of sync with what is actually rendered.

Using it

Drop it into any page, restyle it with your own tokens, and tune the spring until the weight feels right for your product. Nothing here depends on global CSS.