Search

Search components and blocks

Sign in

Blur Hover Button

Pro

Hover and the label dissolves letter by letter into a blur while the icon slides up from the bottom edge — out of focus, then springing sharp at the center. Move away and everything blurs back. The width never changes, so nothing around it shifts.

pnpm dlx shadcn@latest add @ditherui/blur-hover-button

Props

iconReact.ReactNode—
childrenstring—
size"sm" | "md" | "lg""md"
loadingbooleanfalse

When to use the button

Use these buttons for primary and secondary actions where plain color changes feel flat. Variants cover gradient calls to action, bevel, emboss and stitched looks, blur on hover, and a button that swaps its label to confirm an action.

  • Run the shadcn CLI with the name of the button variant you want. Each variant is its own source file you own.

Suggested components