前言：按鈕三態與圖層樣式的關係

網頁按鈕有三種基本狀態：Normal（正常）、Hover（懸浮）、Active（按下）。用圖層樣式非破壞性構建按鈕，優勢在於：參數可視化調整、樣式可一鍵複製套用、縮放不失真（向量圖層）、輸出 CSS 代碼參考。本教學拆解各態樣式結構，提供可直接套用的參數組合。

按鈕結構拆解（以 Hover 態為基準）

四大視覺元素對應圖層樣式

視覺元素	圖層樣式	關鍵參數邏輯
內部漸變主色調	漸變疊加	兩主色節點，中間交界固定在 50% 位置（高度自適應）
藍色邊框	描邊	位置「內部」、大小 1–2 px、顏色品牌藍
淺色內發光（頂部高光帶）	內發光	顏色淺藍/白、阻塞 30–50%、大小 3–5 px、來源「中心」
左右兩側光澤/高光邊	倒角與浮雕 / 內發光(技巧)	技巧：內發光「來源」選「中心」，尺寸大於按鈕高度一半，產生左右垂直高光帶

三態樣式參數對照表

樣式項目	Normal 態	Hover 態	Active 態
漸變疊加	灰度漸變（或主色低飽和） 模式：正常/柔光	品牌主色雙節點漸變 模式：正常、不透明度 100%	同 Hover，但亮度整體下降 10–15%（曲線壓暗）
描邊	深灰/品牌色深調、1 px、內部	品牌主色、1–2 px、內部	同 Hover，或改為內陰影模擬內凹
內發光(高光帶)	無 或 低不透明度	白/淺品牌色、阻塞 40%、大小 4 px	保留或微減
內發光(左右光澤)	無	白、來源「中心」、大小 > 按鈕高度/2、阻塞 0%	保留
內陰影(按下凹陷感)	無	無	距離 0、大小 3–5 px、不透明度 30%、模式「正片疊底」
顏色疊加(去飽和)	灰色 #808080、模式「飽和度」、不透明度 100%	無	無

實操流程：建立按鈕樣式庫

1. 新建 200×60 px 圓角矩形向量圖層（半徑 6 px），命名「Btn Base」。
2. 配置 Hover 態完整樣式（按上表），右鍵圖層「複製圖層樣式」。
3. 複製「Btn Base」兩份，分別命名「Btn Normal」「Btn Active」。
4. 分別右鍵「貼上圖層樣式」，再微調對應態參數（Normal 加灰色飽和度疊加、去內發光/光澤；Active 加內陰影）。
5. 三圖層分組「Button States」，輸出為 .asl 樣式庫文件，團隊共用。

進階技巧

• 圖標/文字內容變更不影響樣式：按鈕內容（文字/圖標）置於獨立圖層/群組，按鈕底圖僅負責視覺容器。
• 響應式寬度：將圓角矩形改為「矩形」+「矩形選區圓角」腳本，或用形狀工具「固定半徑、任意寬度」。
• 狀態動畫預覽：時間軸面板關鍵幀動畫 Normal→Hover→Active 過渡，導出 GIF/MP4 供前端參考。
• 無障礙檢查：Normal/Hover 文字對比度 ≥ 4.5:1，焦點態（Focus）需額外設計明顯外框（如 2 px 藍色描邊）。

從 PS 到 CSS 的參數映射參考

/* PS 漸變疊加 → CSS background-image */
background: linear-gradient(180deg, #0066ff 0%, #0052cc 50%, #0066ff 100%);

/* PS 描邊(內部) → CSS box-shadow inset */
box-shadow: inset 0 0 0 2px #0052cc;

/* PS 內發光(高光帶) → CSS box-shadow inset */
box-shadow: inset 0 -4px 4px -2px rgba(255,255,255,0.3);

/* PS 內發光(左右光澤) → CSS background-image + mask 或伪元素 */
/* PS 內陰影 → CSS box-shadow inset */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

/* PS 顏色疊加(飽和度模式去色) → CSS filter: grayscale(100%) */

結語

「拆解 → 分析 → 重組」是掌握任何 UI 元件設計的通用方法。按鈕看似簡單，實則蘊含豐富的視覺邏輯與交互反饋設計。建立標準化的圖層樣式庫，不僅能大幅提升設計效率，更能保證設計系統的一致性與可維護性。下次設計按鈕時，試著先在紙上畫出三態草圖，再按本文邏輯在 PS 中落地，你會發現思路前所未有的清晰。