Shadcn.io is not affiliated with official shadcn/ui
Glow Border Button
Animated gradient glow border button with rotating light effect for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Glow Border Button preview
Eye-catching button featuring an animated gradient border that continuously rotates around the edges, creating a mesmerizing glow effect. The gradient smoothly cycles through customizable colors while a subtle pulse adds depth. Built on shadcn/ui Button with CSS animations—no JavaScript animation overhead. The inner content sits on a solid background for perfect text readability. Supports all standard button variants and sizes. Perfect for CTAs, premium features, sign-up buttons, or anywhere you need to draw attention without being obnoxious. 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 glow-border-button button into my projectRelated Components
Flow Button
Hover rotating border
Shimmer Button
Animated shimmer ring
Border Trace Button
SVG perimeter trace
Neon Button
Glowing neon halo
Shine Button
Diagonal light sweep
Gradient Button
Shifting gradient bg
FAQ
Was this page helpful?
Sign in to leave feedback.
Glass Button
Translucent button with backdrop-blur for frosted-glass aesthetic over rich backgrounds in React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Gradient Button
Button with a vibrant animated linear-gradient background that shifts colors continuously for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.