Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: Arrow Button
Next: Border Trace Button

Blur Button

Button with text that sharpens into focus on hover for React.

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.

Blur Button preview

Loading...
Scroll to load preview

Installation

Install
Pro button

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

Arrow Button

Button with an animated arrow that slides in on hover for React.

Border Trace Button

Button with an animated border that traces around the perimeter on hover for React.