Underline Button
Minimal button with an animated underline that grows from center on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Underline Button preview
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. Built on top of the shadcn Button so every variant and size you already use just works.
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 underline-button button into my projectRelated Components
Arrow Button
Hover slides in arrow
Pill Button
Pill with inset highlight
Underline Button
Growing underline
Shine Button
Diagonal light sweep
Gradient Button
Shifting gradient bg
Stitch Button
Dashed stitched border
FAQ
Was this page helpful?
Sign in to leave feedback.