Shadcn.io is not affiliated with official shadcn/ui
Text Reveal Button
Button with text that reveals with a sliding mask effect on hover for React.
Text Reveal Button preview
Text that unveils itself. Hover and watch the button text get revealed by a sliding mask—like a curtain being drawn. The effect is clean and satisfying, adding motion to your CTA without being over the top. Works great for "Learn More" or "Discover" buttons where the reveal metaphor fits the action. Pure CSS animation, smooth on all devices.
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 text-reveal-button button into my projectRelated Components
Shimmer Button
Flowing shimmer effect
Typewriter Button
Text types out
Blur Button
Text sharpens into focus
Shine Button
Diagonal light sweep
Slide Reveal Button
Sliding content reveal
Scramble Button
Text scrambles through characters
FAQ
Was this page helpful?
Sign in to leave feedback.