Squeeze Button

Squeeze it. This button compresses inward when you hover—like you're pinching it—then bounces back with elastic energy. It's tactile and playful, the digital equivalent of a stress ball. The spring physics make it feel alive, like it's pushing back against your cursor. Users hover repeatedly just to feel it squish. Perfect for playful brands, kids' apps, or any button that shouldn't take itself too seriously. The squeeze-and-release creates an oddly satisfying micro-interaction.

Squeeze Button preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/squeeze-button.json

npx shadcn@latest add https://www.shadcn.io/registry/squeeze-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/squeeze-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/squeeze-button.json

Related Components

FAQ