本教程演示一種高效的「雙層形狀+圖層樣式」工作流，僅用 10 步即可產出帶倒影、可換色的水晶按鈕，適合網頁 UI 批量生產。

一、效果預覽

按鈕主體為雙層圓角矩形疊加，內層漸變模擬玻璃厚度，外層高光描邊勾勒倒角，底部倒影增強懸浮感，頂部可通過色相/飽和度一鍵換色。

二、基礎形狀構建

1. 新建 300×200 px 文檔，圓角矩形工具（半徑 10~15 px）繪製 250×120 px 底層形狀，命名「底部」。
2. 複製圖層（Ctrl+J），自由變換（Ctrl+T）縮小約 90%，命名「頂部」，形成雙層疊加結構。

三、圖層樣式賦予水晶質感

1. 底部圖層：漸變疊加

• 雙擊「底部」→ 漸變疊加：線性、角度 90°、縮放 100%。
• 漸變編輯器：左色標 #0066CC（位置 0%），中 #0099FF（50%），右 #0066CC（100%），同色相不同明度構體體積感。

2. 頂部圖層：綜合樣式

• 倒角與浮雕：內部倒角、平滑、深度 100%、大小 10 px、高光「線性減淡」75%、陰影「線性加深」50%。
• 描邊：1 px、內部、漸變填充（#FFFFFF→#CCCCCC）。
• 內發光/投影微調，增強邊緣通透感。

四、高光細節與倒影

1. 頂部高光橢圓：新建圖層，橢圓選區填白，不透明度 50%，混合模式「疊加」。
2. 邊緣描邊高光：載入「頂部」選區 → 新建圖層 → 編輯 → 描邊（1 px、白、內部） → 添加蒙版，黑白漸變由上往下拉出淡出效果。
3. 整體倒影：隱藏背景 → 合併可見圖層（Ctrl+Alt+Shift+E） → 複製 → 垂直翻轉 → 自由變換壓扁 → 添加蒙版漸變淡出 → 不透明度 30%~40%。

五、文字與一鍵換色

1. 文字工具輸入文案，字體邊緣設「無」（銳利像素風）。
2. 為文字套用「頂部」圖層樣式（右鍵複製/粘貼圖層樣式）。
3. 頂部新建「色相/飽和度」調整圖層，勾選「著色」，拖動色相滑桿即可生成紅/綠/紫等全色系按鈕。

六、效率小結

• 形狀圖層可無損縮放，適配不同尺寸需求。
• 樣式存為「預設」後，新建按鈕僅需：畫形狀 → 套用樣式 → 改文字 → 調色相，單枚耗時 < 1 分鐘。
• 倒影圖層獨立，響應式佈局時可單獨控制顯隱。