Shimmer Button

一道亮弧繞按鈕中心持續旋轉，只露出外框那一圈，形成沿周邊流動的光。純 CSS 圓錐漸層加 motion/react 旋轉，無任何 canvas 或外部資源。

Shimmer Button 是用 React、Tailwind CSS 與 Motion 做的微光按鈕（shimmer button／邊框流光按鈕）元件：一道 CSS 圓錐漸層亮弧繞著按鈕旋轉，只露出外框那一圈，看起來像光沿著邊緣流動。

Playground

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

import * as React from "react";

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

<ShimmerButton/>

    </div>
  );
}

適用情境

• Landing page hero 的主要行動按鈕，例如「開始使用」「預約展示」。
• 定價頁中推薦方案的按鈕，和其他一般按鈕做出層級差異。
• 深色主題的產品頁或活動頁，需要一顆在暗底上醒目的按鈕。
• 不適合：同一畫面放好幾顆。流光會互相搶注意力，建議一個區塊只用一顆，其餘用一般按鈕。

安裝

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

使用

import { ShimmerButton } from "@/components/ui/shimmer-button";

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

元件轉傳所有原生 button 屬性（onClick、disabled、type 等），也支援 className 覆寫尺寸與底色。

範例

表單送出鈕，送出中停用

元件會轉傳所有原生 button 屬性，所以 type="submit" 與 disabled 照常使用；停用時按鈕會降低透明度並停止接收點擊。

"use client";

import { useFormStatus } from "react-dom";
import { ShimmerButton } from "@/components/ui/shimmer-button";

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

品牌漸層底色與彩色流光

background 可以是任何 CSS 背景值，包含漸層；shimmerColor 改光的顏色，spread 調整亮弧長度。

<ShimmerButton
  background="linear-gradient(135deg, #4f46e5, #7c3aed)"
  shimmerColor="#c4b5fd"
  spread={70}
  shimmerDuration={4}
>
  預約產品展示
</ShimmerButton>

方角、較大尺寸

borderRadius 改成固定值就是方角按鈕；尺寸與字級用 className 覆寫預設的 px-6 py-3 text-sm。

<ShimmerButton
  borderRadius="12px"
  shimmerSize="2px"
  className="px-8 py-4 text-base"
>
  下載桌面版
</ShimmerButton>

Props

其餘 React.ButtonHTMLAttributes 皆會轉傳至底層 button。

可及性

• 使用者系統開啟「減少動態效果」時，光停止旋轉，按鈕維持靜態外觀
• 全部裝飾層皆帶 aria-hidden，輔助科技只讀到按鈕文字
• 帶 focus-visible 焦點環，鍵盤操作可見

常見問題

可以在 Next.js App Router 使用嗎？

可以。檔案開頭已有 "use client"，在 Server Component 頁面中照常 import。首次渲染與 SSR 一致，掛載後才依「減少動態效果」停止旋轉。

可以當成連結使用嗎？

元件渲染的是原生 button，沒有提供換成 a 的選項。要導頁時，可以在 onClick 裡呼叫路由；不要把它包在 <a> 或 Link 裡，按鈕放在連結內是不合法的 HTML 結構。

怎麼改流光的速度、顏色與粗細？

shimmerDuration 是繞一圈的秒數（預設 3），shimmerColor 是光的顏色，shimmerSize 是光帶厚度（預設 1.5px），spread 是亮弧的角度寬度（預設 40）。

文字顏色可以改嗎？

預設是 text-white，可以在 className 加上其他 text-* class 覆寫，例如淺色底色時改成 text-neutral-900。

需要哪些依賴？

motion、clsx 與 tailwind-merge，流光本身是 CSS 漸層，不需要 canvas 或圖片。不想用 CLI 時，可在安裝區的「手動」分頁複製原始碼。