Underline Button

Minimal button with an animated underline that grows from center on hover for React.

Underline Button preview

Scroll to load 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.

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 project

Text Reveal Button

Neon text reveal

Outline Fill Button

Rising fill animation

Shine Button

Diagonal light sweep

Typewriter Button

Typing text effect

Slide Reveal Button

Sliding layers

Shimmer Button

Flowing shimmer

Underline Button