Moving Border Button
邊框繞行發光的凸顯按鈕，一顆彗星般的光點沿圓角邊框巡遊。
一顆柔光光點沿著圓角邊框巡遊，替按鈕鑲上不斷流動的發光邊框，適合用在最想被點擊的主要行動呼籲。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
16
4
130
<MovingBorderButton />
安裝
npx shadcn@latest add https://webberui.com/r/moving-border-button.json或在 components.json 設定 registries 後，改用 @webberui/moving-border-button 安裝。
安裝依賴後，從 registry JSON（/r/moving-border-button.json 的 files[0].content）複製 moving-border-button.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge lucide-react使用
import { MovingBorderButton } from "@/components/ui/moving-border-button";
<MovingBorderButton onClick={() => console.log("clicked")}>
Get Started
</MovingBorderButton>圓角膠囊、雙光點、自訂顏色：
<MovingBorderButton
dual
borderRadius={9999}
colorFrom="#f472b6"
colorTo="#a855f7"
>
Upgrade to Pro
</MovingBorderButton>Props
除下表外，其餘原生 <button> 屬性（onClick、disabled、type 等）皆會透傳。
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
borderRadius | number | 16 | 圓角半徑（px）；光點沿此圓角矩形巡遊 |
duration | number | 4 | 光點繞行一圈的時長（秒），越小越快 |
borderWidth | number | 1 | 邊框環寬度（px），外層與內襯之間露出的縫隙 |
glowSize | number | 130 | 光點直徑（px），越大拖尾越長 |
colorFrom | string | "#22d3ee" | 光點核心色（漸層起點） |
colorTo | string | "#818cf8" | 光點外緣色（漸層中段，之後淡出） |
reverse | boolean | false | 逆時針巡遊 |
dual | boolean | false | 在對側再放一顆光點，形成雙彗星對稱環繞 |
className | string | — | 內襯（按鈕面）的樣式 |
containerClassName | string | — | 外層容器（尺寸、外距）的樣式 |
可及性
- 使用者系統開啟「減少動態效果」時，光點停止巡遊，改以固定漸層環呈現邊框
- 元件即原生
<button>，鍵盤聚焦與disabled狀態皆保留，聚焦時顯示 focus ring