網頁按鈕是 UI 設計中最高頻元件。本教學示範如何用「圓角矩形工具 + 圖層樣式 + 智慧物件」在 5 分鐘內建立一套可無限複用、多狀態、多色系的專業按鈕組件庫，並解決像素對齊、樣式管理、狀態擴展等實戰痛點。

最終效果

核心製作流程 (11 步驟)

1. 新建文件與工具設定： 新建適當尺寸文件。選取「圓角矩形工具」 (U)，選項列設定：半徑 5px、**勾選「對齊像素」**(關鍵：防止邊緣模糊)、形狀模式。
   
2. 繪製基礎形狀： 新圖層拖曳繪製圓角矩形。若邊緣模糊，確認步驟 1 已勾選「對齊像素」。
   
3. 建立核心按鈕樣式 (儲存為預設)： 雙擊圖層開啟樣式面板，設定：
   • 斜面與浮雕： 內部斜面、平滑、深度 100%、大小 3-5px、向上、高光「螢幕」白 70%、陰影「正片疊底」黑 50%。
   • 描邊： 1px、漸層 (深→淺)、位置內部。
   • 漸層疊加： 線性、主色調淺→深 (如綠系 #8FCD3E → #5A9B1A)。
   • 投影： 距離 2px、大小 3px、不透明度 30%。

   設定完成後，在「樣式」面板 (視窗→樣式) 點擊「新建樣式」儲存為「Btn_Base_Green」。
   

4. 頂部高光帶： Ctrl+點擊形狀縮圖載入選區 → 矩形選框工具按 Alt 扣除底部 → 新圖層填充白 → Ctrl+D → 模式「疊加」不透明度 20%。
   
5. 次級高光帶： 新圖層 → 矩形選區更窄 → 填充白 → 模式「線性減淡」不透明度 30%。
   
6. 文字標籤： 文字工具輸入文案，**關鍵：字體邊緣設「無」(銳利/無抗鋸齒)**，適用小尺寸按鈕清晰顯示。套用步驟 3 儲存的「Btn_Base_Green」樣式 (或新建文字專用樣式)。
   

組件庫擴展策略

多色系一鍵切換

在「樣式」面板右鍵「Btn_Base_Green」→「複製樣式」→ 重命名「Btn_Base_Red/Blue/Orange」→ 雙擊修改「漸層疊加」顏色停駐點即可。同一結構、不同色系，秒級切換。

多狀態擴展 (Normal/Hover/Active/Disabled/Focus)

狀態	視覺差異	樣式調整
Normal	基礎狀態	基礎樣式
Hover	提亮、邊框高光	漸層疊加整體提亮 10-15%、描邊亮度提高、外發光淡淡
Active/Pressed	內凹感	斜面與浮雕→「外部斜面」、漸層疊加反轉 (深→淺)、投影距離 0、大小 1px
Disabled	灰化、禁用感	漸層疊加去飽和度、不透明度 50%、描邊變灰、移除高光層
Focus	鍵盤聚焦	外發光藍色 #007AFF、大小 3px、不透明度 60%

響應式尺寸變體

• 利用「屬性面板」 (選取形狀圖層時顯示) 數值修改寬高/圓角，向量無損縮放。
• 建立「大/中/小」三種標準尺寸 (如 120×40 / 90×36 / 60×32px)，對應不同佈局密度。

前端交付清單

• 設計稿 .psd (含組件庫頁面、樣式面板、智慧物件)。
• 規格文檔：尺寸、圓角、間距、字體、色值 (HEX/RGBA)、陰影參數 (X/Y/Blur/Spread/Color)、狀態變化規則。
• 切圖資源：僅需導出圖標/圖片類素材，**按鈕本體建議純 CSS 實現** (border-radius/background-gradient/box-shadow)，效能最優。
• Figma/Sketch/Zeplin 同步組件庫，設計令牌同步。

「一個基礎樣式 + 參數化變體」是按鈕組件庫的核心架構思想。掌握此法，無論是網頁、後台、移動端、小程式，你都能在專案啟動日交付完整、一致、可維護的按鈕系統。立即動手建立你的專屬按鈕設計系統吧！