Shadcn.io is not affiliated with official shadcn/ui
Blur Button
Button with text that sharpens into focus on hover for React.
Blur Button preview
From blur to clarity. The button text starts slightly blurred and sharpens into crisp focus when you hover. It's like adjusting a camera lens—satisfying and attention-grabbing. The effect creates intrigue, making users want to hover to reveal the content. Perfect for mystery reveals, coming soon buttons, or just adding that extra layer of polish. Simple CSS, maximum impact.
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 blur-button button into my projectRelated Components
Ghost Button
Transparent with fill
Text Reveal Button
Text reveal effect
Shimmer Button
Flowing shimmer
Typewriter Button
Text types out
Neon Button
Glowing neon effect
Outline Fill Button
Fill from bottom
FAQ
Was this page helpful?
Sign in to leave feedback.