Shimmer Button
光沿按鈕周邊流動的微光按鈕，帶內襯高光與 hover 立體反饋。
一道亮弧繞按鈕中心持續旋轉，只露出外框那一圈，形成沿周邊流動的光。純 CSS 圓錐漸層加 motion/react 旋轉，無任何 canvas 或外部資源。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
3
40
<ShimmerButton />
安裝
npx shadcn@latest add https://webberui.com/r/shimmer-button.json或在 components.json 設定 registries 後，改用 @webberui/shimmer-button 安裝。
安裝依賴後，從 registry JSON（/r/shimmer-button.json 的 files[0].content）複製 shimmer-button.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { ShimmerButton } from "@/components/ui/shimmer-button";
<ShimmerButton onClick={() => console.log("clicked")}>
Get Started
</ShimmerButton>元件轉傳所有原生 button 屬性（onClick、disabled、type 等），也支援 className 覆寫尺寸與底色。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
shimmerColor | string | "#ffffff" | 沿邊流動的光的顏色 |
shimmerSize | string | "1.5px" | 光帶厚度（即外框寬度） |
shimmerDuration | number | 3 | 光繞行一圈的時間（秒） |
spread | number | 40 | 亮弧的角寬度（度），越大光帶越長 |
borderRadius | string | "9999px" | 按鈕圓角 |
background | string | "rgba(0, 0, 0, 1)" | 按鈕底色，可為純色或漸層 |
className | string | — | 透傳至根 button，可覆寫間距與尺寸 |
其餘 React.ButtonHTMLAttributes 皆會轉傳至底層 button。
可及性
- 使用者系統開啟「減少動態效果」時，光停止旋轉，按鈕維持靜態外觀
- 全部裝飾層皆帶
aria-hidden，輔助科技只讀到按鈕文字 - 帶
focus-visible焦點環，鍵盤操作可見