彩虹漸層按鈕 Rainbow Button｜免費 React 元件

彩虹漸層流動動畫按鈕，支援實心與外框兩種樣式與同色系柔光暈染。

一顆會讓彩虹漸層持續橫向流動的按鈕，內建 solid 與 outline 兩種樣式、可調流速與同色系光暈。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add rainbow-button

Rainbow Button 是用 React、Tailwind CSS 與 CSS keyframes 做的彩虹漸層按鈕（rainbow gradient button、流動漸層按鈕）元件：漸層以 background-position 動畫持續流動，下方疊一層同色系的模糊光暈，另有只在邊框顯示彩虹的 outline 樣式。Motion 只用來偵測「減少動態效果」設定。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

流動速度（秒/圈）speed

樣式variant

底部光暈glow

停用狀態disabled

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<RainbowButton/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

適用情境

產品首頁 Hero 區的主要行動按鈕，例如「免費試用」「開始使用」
新功能上線或活動頁裡需要特別醒目的入口
深色背景的開發者工具頁面，搭配 outline 樣式做次要按鈕
一個畫面只放一顆，避免與其他按鈕搶焦點

安裝

npx webberui@latest add https://webberui.com/r/rainbow-button.json

或在 components.json 設定 registries 後，改用 @webberui/rainbow-button 安裝。

使用

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 等）。

範例

搭配圖示

children 外層已經是 inline-flex 與 gap-2，直接放入文字與圖示即可。

import { ArrowRight } from "lucide-react";
import { RainbowButton } from "@/components/ui/rainbow-button";

<RainbowButton className="px-6 py-3 text-base">
  開始免費試用
  <ArrowRight className="size-4" />
</RainbowButton>

表單送出與載入狀態

元件會透傳原生 button 屬性，type="submit" 與 disabled 都能直接使用；停用時有 opacity-50 並取消滑鼠事件。

"use client";

import { useFormStatus } from "react-dom";
import { RainbowButton } from "@/components/ui/rainbow-button";

export function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <RainbowButton type="submit" disabled={pending}>
      {pending ? "送出中…" : "加入候補名單"}
    </RainbowButton>
  );
}

深色品牌色階

solid 樣式的文字預設是近黑色，換成深色色階時用 className 改成白字；glow={false} 可以關掉下方光暈。

<RainbowButton
  colors={["#1e3a8a", "#7c3aed", "#be185d"]}
  speed={5}
  glow={false}
  className="text-white"
>
  預約產品展示
</RainbowButton>

Props

Prop	型別	預設值	說明
`colors`	`string[]`	七色彩虹	彩虹色階，尾端自動接回首色成環，至少兩色
`speed`	`number`	`3`	單次流動循環時長（秒），越小越快
`variant`	`"solid" \| "outline"`	`"solid"`	`solid` 填滿漸層；`outline` 只在邊框與光暈呈現彩虹
`glow`	`boolean`	`true`	是否在下方疊加同色系柔光暈染
`className`	`string`	—	透傳至根 `button` 的樣式