Shadcn.io is not affiliated with official shadcn/ui
Border Trace Button
Button with an animated border that traces around the perimeter on hover for React.
Watch the line draw itself. Hover and a glowing line starts tracing around the button's edge—like a pen drawing a box in real-time. The trace completes the full perimeter, then pulses gently. It's technical, precise, and satisfying to watch. The SVG stroke animation feels premium and intentional, like something loading or activating. Perfect for tech products, developer tools, or any UI that should feel engineered. The line draws clockwise—purposeful and clean.
Border Trace Button preview
Loading...
Scroll to load preview
Installation
Install
Pro button
Related Components
Glow Border Button
Rotating gradient glow
Outline Fill Button
Rising fill animation
Corner Accent Button
Animated corners
Shimmer Button
Flowing shimmer
Ring Expand Button
Expanding rings
Pulse Button
Pulsing attention ring