🔘 CSS Button Generator

📐 工作原理與說明

把背景、圓角、內邊距、陰影與懸停態引數拼裝為完整 CSS 規則（含 :hover 偽類），即時預覽並可複製；用於快速產出風格統一的按鈕樣式。

Style a button background, radius, shadow and hover state visually and copy the generated CSS, with several built-in presets.

背景色

文字顏色

圓角 (px)

水平內邊距

垂直內邊距

邊框

邊框粗細

按鈕文字

字號

陰影 X

陰影 Y

陰影模糊

預覽

📚 深度解析：按鈕生成器

生成橙色主按鈕

輸入：底色 #FF6B35、圓角 12px、陰影柔和。處理：組合背景、邊框、內邊距與懸停。輸出：按鈕預覽與完整 CSS。

懸停態怎麼處理？: 生成 :hover 的明度/位移變化，可直接用。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
生成的程式碼/圖片能直接用嗎？: 可直接複製使用，建議粘到專案後在瀏覽器實測微調；本工具只生成不託管。
會儲存或上傳我的內容嗎？: 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。