Shadcn.io is not affiliated with official shadcn/ui
Slide Reveal Button
Button with sliding layers that reveal contrasting colors on hover for React.
Hover and the whole button transforms. The background slides away while a contrasting layer slides in from the opposite direction—text shifts too, creating this choreographed dance of color. It's the kind of polished interaction you see on award-winning agency sites. Not flashy, just smooth and intentional. The animation feels like the button is physically responding to your hover, revealing what's underneath. Perfect for CTAs that need to feel premium without being over the top.
Slide Reveal Button preview
Loading...
Scroll to load preview
Installation
Install
Pro button
Related Components
Outline Fill Button
Rising fill animation
Shine Button
Diagonal light sweep
Shimmer Button
Flowing shimmer effect
Flip Button
3D flip animation
Liquid Button
Fluid fill animation
Morph Button
Shape morphing