本教程示範如何用 Photoshop 圖層樣式快速構建一枚具有深邃質感、微妙高光層次、懸停/按下狀態可擴展的黑色網頁按鈕。全向量、非破壞、樣式可存為 ASL 庫一鍵復用，適合 UI 設計師建立設計系統基礎組件。

按鈕結構拆解（5 圖層核心）

Layer 1：背景氛圍層

• 新建圖層填黑，添加「漸變疊加」：徑向，#1A1A1A（中心）→ #000000（邊緣），營造聚光燈感。

Layer 2：按鈕主體 Base

• 圓角矩形工具（半徑 6-8 px），填充 #0D0D0D。
  添加圖層樣式：
  - 倒角與浮雕：外部倒角，深度 120%，大小 5 px，軟化 2 px，光澤輪廓「圓錐」，高光 #333333（不透明度 30%），陰影 #000000（100%）。
  - 內陰影：距離 2 px，大小 4 px，#000000 40%，增加內凹感。
  - 描邊：1 px，#1A1A1A，位置「內部」，勾勒邊框線。
  - 漸變疊加：線性，#1A1A1A（頂）→ #0A0A0A（底），角度 90°，不透明度 20%，微調立體感。

Layer 3：頂部高光帶（關鍵質感來源）

• 新建圖層，圓角矩形（高度 ≈ 按鈕高度 15%），填白。
  添加蒙版：黑白線性漸變（頂部不透明→底部透明），製造「頂部亮、向下淡出」的高光帶。
  圖層模式「柔光」，不透明度 35%。

Layer 4：左上角裝飾高光（細節豐富度）

• 鋼筆勾勒左上角三角/曲面高光區，填白。
  添加「漸變疊加」：線性 #FFFFFF→透明，角度 -45°。
  同法製作右上角對稱高光，不透明度再降 50%。

Layer 5：文字與圖標

• 文字圖層：白色 #FFFFFF，字體 PingFang SC Medium / SF Pro Text，大小 14-16 px。
  添加「漸變疊加」：#FFFFFF→#CCCCCC，角度 90°，增加文字立體感。
  「投影」：距離 1 px，大小 1 px，#000000 50%，保證深色背景可讀。
• 圖標同理，建議使用 SVG 智能對象置入。

Layer 6：倒影/投影（可選，視佈局）

• 群組複製合併 → 垂直翻轉 → 縮放 90% → 蒙版黑白漸變淡出 → 不透明度 15% → 高斯模糊 2 px。

狀態擴展：懸停/按下/禁用

將上述圖層組存為智能對象，三狀態僅修改參數：
- Hover：Base 層漸變疊加亮度 +10%，高光帶不透明度 +10%，描邊色 #333333。
- Active：倒角改「內部倒角」，高光帶隱藏，整體向下位移 1 px，投影距離 1 px。
- Disabled：整體群組不透明度 40%，去除高光帶與倒角高光。

所有參數均可在「圖層樣式」面板數值微調，無需重繪，實現設計系統級組件管理。