Make your AI a shadcn expert
Previous: Spotlight Button
Next: Stitch Button

Squeeze Button

Button that squeezes narrow then springs back wider on hover for React.

Squeeze Button preview

Scroll to load preview

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.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:

use shadcnio to install the squeeze-button button into my project

Bounce Button

Elastic click bounce

Elastic Button

Cursor-following stretch

Morph Button

Shape morphing

Tilt Button

3D tilt effect

Liquid Button

Fluid fill animation

Pulse Button

Pulsing attention ring

FAQ

Was this page helpful?

Sign in to leave feedback.

Spotlight Button

Button with a soft light that follows your cursor on hover for React.

Stitch Button

Button with animated dashed border that looks like stitching being sewn on hover for React.