Shadcn.io is not affiliated with official shadcn/ui
Highlight Button
Button with a highlight bar that slides across on hover for React.
Highlight Button preview
Simple but effective. A thin highlight bar slides from one end to the other when you hover—like a progress indicator crossed with a hover effect. It's subtle visual feedback that says "yes, this is clickable." Works beautifully for navigation items, secondary actions, or anywhere you want understated elegance. The bar color matches your theme, and the animation is smooth without being slow.
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 highlight-button button into my projectRelated Components
Underline Button
Growing underline
Swipe Button
Color swipe fill
Shimmer Button
Flowing shimmer
Outline Fill Button
Fill from bottom
Shine Button
Diagonal light sweep
Border Trace Button
SVG border draw
FAQ
Was this page helpful?
Sign in to leave feedback.