Underline Button

Sometimes less is everything. This button is just text with an underline that grows from the center outward on hover—clean, confident, editorial. No backgrounds, no borders, just typography and motion. It's the kind of understated interaction you see on high-end fashion sites and design portfolios. The animation is quick and precise, like a confident pen stroke. Perfect when you want a CTA that whispers instead of shouts. Pairs beautifully with bold headlines.

Underline Button preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/underline-button.json

npx shadcn@latest add https://www.shadcn.io/registry/underline-button.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/underline-button.json

bunx shadcn@latest add https://www.shadcn.io/registry/underline-button.json

Related Components

FAQ