Morph Button

Six single-purpose morphing buttons — submit, recommend, subscribe, settings, delete, and share — each animating its icon on hover with framer-motion.

buttonmotionanimationframer-motionhover

Open preview in new tab

How do I install the Morph Button component?

Run the command below in a project with the shadcn CLI. It copies the component source into your repo and installs its dependencies.

npx shadcn@latest add https://www.saasuji.com/r/morph-button.json

Dependencies

Also available as a markdown reference for AI agents: /components/morph-button.md

Related components

Button

Eight variants and twelve sizes with loading, disabled, and icon states, built on class-variance-authority and Radix Slot.

Shimmer Button

A button with an animated conic-gradient shimmer sweeping across its surface, with configurable shimmer color, size, speed, radius, and background.