液體填充按鈕
hover 時液面自底部帶波浪漲滿按鈕，文字反色。
hover 或鍵盤聚焦時，液體自按鈕底部以彈簧節奏漲滿：SVG 波浪頂緣雙層流動、氣泡上升，文字以 clip-path 與液面同步反色，適合作為醒目的 CTA 按鈕。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.14
10
2.2
<LiquidFillButton />
安裝
npx shadcn@latest add https://webberui.com/r/liquid-fill-button.json或在 components.json 設定 registries 後，改用 @webberui/liquid-fill-button 安裝。
安裝依賴後，從 registry JSON（/r/liquid-fill-button.json 的 files[0].content）複製 liquid-fill-button.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { LiquidFillButton } from "@/components/ui/liquid-fill-button";
<LiquidFillButton color="#4f46e5" onClick={() => console.log("clicked")}>
立即開始
</LiquidFillButton>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 按鈕內容（文字與圖示），會同步渲染一份反色層 |
color | string | "#6366f1" | 液體顏色（任何合法 CSS 顏色值） |
fillTextColor | string | "#ffffff" | 液體覆蓋後的文字顏色 |
idleLevel | number | 0.14 | 靜止時的液面高度（0～1） |
waveHeight | number | 10 | 波浪振幅（px），數值越大波峰越高 |
waveDuration | number | 2.2 | 前景波浪流動一輪的秒數，背景波自動放慢並反向 |
className | string | — | 透傳合併到按鈕根元素 |
...props | ButtonHTMLAttributes | — | 其餘原生 <button> 屬性（onClick、disabled 等） |
可及性
- 使用者系統開啟「減少動態效果」時，液面直接切換高度、不彈跳，波浪與氣泡停止流動
- 反色文字層與液體層皆為
aria-hidden且pointer-events-none，輔助科技只會朗讀一次按鈕內容 - 鍵盤
Tab聚焦同樣觸發填充，並保留focus-visiblering 作為焦點指示 - 根元素為原生
<button type="button">，完整支援disabled、表單語意與所有原生屬性