Moving Border Button

A standout button with a glowing border that travels, a comet-like point of light patrolling around the rounded frame.

A soft point of light patrols the rounded border, setting the button in a border that glows and flows continuously — ideal for the primary call to action you most want clicked.

Loading preview…

npx shadcn@latest add https://webberui.com/r/moving-border-button.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Corner radius (px)borderRadius

Orbit duration (s)duration

Dot size (px)glowSize

130

Dot core colorcolorFrom

Dot edge colorcolorTo

Two orbiting dotsdual

<MovingBorderButton />

Installation

npx shadcn@latest add https://webberui.com/r/moving-border-button.json

Or, once registries are configured in components.json, install it as @webberui/moving-border-button.

Usage

import { MovingBorderButton } from "@/components/ui/moving-border-button";

<MovingBorderButton onClick={() => console.log("clicked")}>
  Get Started
</MovingBorderButton>

A rounded pill, dual lights, custom colors:

<MovingBorderButton
  dual
  borderRadius={9999}
  colorFrom="#f472b6"
  colorTo="#a855f7"
>
  Upgrade to Pro
</MovingBorderButton>

Props

Apart from the table below, all native <button> attributes (onClick, disabled, type, and so on) are forwarded.

Prop	Type	Default	Description
`borderRadius`	`number`	`16`	Corner radius (px); the light patrols along this rounded rectangle
`duration`	`number`	`4`	Time for the light to travel around once (seconds); smaller is faster
`borderWidth`	`number`	`1`	Width of the border ring (px), the gap revealed between the outer layer and the lining
`glowSize`	`number`	`130`	Diameter of the light (px); larger means a longer trail
`colorFrom`	`string`	`"#22d3ee"`	Core color of the light (the gradient's start)
`colorTo`	`string`	`"#818cf8"`	Outer color of the light (the gradient's middle, fading out after it)
`reverse`	`boolean`	`false`	Patrol counter-clockwise
`dual`	`boolean`	`false`	Place a second light on the opposite side, forming two symmetrically orbiting comets
`className`	`string`	—	Styles for the lining (the button face)
`containerClassName`	`string`	—	Styles for the outer container (size, margins)

Accessibility

When the user has "reduce motion" enabled at the system level, the light stops patrolling and the border is presented as a fixed gradient ring
The component is a native <button>, so keyboard focus and the disabled state are preserved, with a focus ring shown on focus