Rainbow Button
彩虹漸層流動動畫按鈕，支援實心與外框兩種樣式與同色系柔光暈染。
一顆會讓彩虹漸層持續橫向流動的按鈕，內建 solid 與 outline 兩種樣式、可調流速與同色系光暈。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
3
<RainbowButton />
安裝
npx shadcn@latest add https://webberui.com/r/rainbow-button.json或在 components.json 設定 registries 後，改用 @webberui/rainbow-button 安裝。
安裝依賴後，從 registry JSON（/r/rainbow-button.json 的 files[0].content）複製 rainbow-button.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge lucide-react使用
import { RainbowButton } from "@/components/ui/rainbow-button";
<RainbowButton>Get Started</RainbowButton>
<RainbowButton variant="outline">Outline</RainbowButton>自訂色階與流速：
<RainbowButton
colors={["#ff4d4d", "#4dd2ff", "#c14dff"]}
speed={1.5}
>
Custom
</RainbowButton>RainbowButton 透傳所有原生 <button> 屬性（onClick、disabled、type 等）。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
colors | string[] | 七色彩虹 | 彩虹色階，尾端自動接回首色成環，至少兩色 |
speed | number | 3 | 單次流動循環時長（秒），越小越快 |
variant | "solid" | "outline" | "solid" | solid 填滿漸層；outline 只在邊框與光暈呈現彩虹 |
glow | boolean | true | 是否在下方疊加同色系柔光暈染 |
className | string | — | 透傳至根 button 的樣式 |
同時支援全部原生 button 屬性。
可及性
- 使用者系統開啟「減少動態效果」時，漸層流動會暫停於靜止狀態，仍保留彩虹外觀
- 焦點時提供清楚的
focus-visible外框環，鍵盤操作可見 - 掛載前後渲染一致，避免 SSR hydration 不匹配