What the Frontend? Open the interactive gallery →
Hover & Micro-interactions

Elastic button

A button that squishes and stretches on click — deforming with a spring physics response.

What you're seeing

Press a button and it squashes down, then springs back with a slight overshoot.

Where you'll see it

CTAs, submit buttons, any primary action.

Difficulty

Low — 2/5

Libraries that build it

MotionGSAPCSS

Ready to prompt — paste this into your AI coding tool

"On mousedown scale button to [0.92, 1.08] with spring, on mouseup spring back to [1, 1] using Motion spring config"

Related Hover & Micro-interactions effects

Hover image previewLink underline drawButton morphImage distortion on hoverTooltip animationToggle switch
See the animated preview in the dictionary →