Morphing Buttons
Buttons that morph their shape, size, or label between states. Use for loading, success, and submit flows that confirm progress to the user.
Buttons that morph their shape, size, or label between states. Use for loading, success, and submit flows that confirm progress to the user.
Search blocks by description or jump to a page.
Morphing Buttons displays five buttons in a centered, wrapping row: Default, Secondary, Destructive, Outline, and Ghost. Every button starts with a slightly rounded rectangle corner and smoothly transitions to a full pill shape on hover, giving each variant the same consistent motion while preserving its own fill, border, and color treatment.
All five variants are independent. You can keep only the ones your interface needs, reorder them, or relabel each button without affecting the others. The hover animation is the same across every variant, so mixing and matching subsets still looks intentional and cohesive.
Reach for this block on a developer tools company's component showcase, documentation site, or design system preview page where you want to show the full range of available button styles in one place. It works better than a plain static grid when the goal is to demonstrate interactive behavior rather than just surface color tokens.
A natural flow around it on a Components page:
Before
After
The block covers all five standard variants in one preview. A few focused ways to adapt it:
Tip: if you use this block in documentation, place the Destructive variant last or visually separated so readers do not read the red as an error state on the page itself.