Make your AI a shadcn expert
Previous: Marquee Button
Next: Neon Button

Morph Button

Button that morphs between shapes with elastic spring animation on hover for React.

Morph Button preview

Scroll to load preview

Ever poke a blob and watch it squish? That's this button. Hover and it smoothly morphs from a rounded rectangle into a playful organic shape—like it's alive and responding to your cursor. The elastic spring physics make it feel satisfyingly squishy. It's that little touch of personality that makes your UI feel handcrafted rather than generic. Perfect for creative portfolios, playful brands, or anywhere you want buttons that feel alive. Works great for primary CTAs that need character.

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 morph-button button into my project

Bounce Button

Elastic click bounce

Magnetic Button

Particle attraction

Liquid Button

Fluid fill animation

Pulse Button

Pulsing attention ring

Ripple Button

Material Design ripple

Shine Button

Diagonal light sweep

FAQ

Was this page helpful?

Sign in to leave feedback.

Marquee Button

Button with scrolling marquee text that moves on hover for React.

Neon Button

Button with glowing neon effect and subtle flicker on hover for React.