Atelier UI

Search components…

Search components…

中文English

Gradient Border Button

Button with a continuously rotating conic-gradient border; colors and speed are configurable.

#button#gradient#border#animated
Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

GradientBorderButtonProps

Also accepts all props of React.ComponentProps<"button">

PropTypeDefaultDescription
speednumber3Seconds per rotation
colorsstring"#a855f7Conic-gradient color stops

Install

$ npx shadcn@latest add https://chromotion.dev/r/gradient-border-button.json

More like this

Aurora Button

Buttons

Button with a continuously flowing blue/purple/green aurora gradient and a matching outer glow.

Liquid Metal Button

Buttons

Layered gradients imitate flowing liquid metal; a blurred halo spreads on hover.

Shimmer Button

Buttons

Button with a sweeping shimmer; shine color, background and speed are configurable.