透明玻璃質感按鈕是 UI 設計經典題材，兼具現代感與層次深度。本教程拆解從基礎形狀構建、圖層樣式疊加、高光細節雕琢到最終輸出的完整流程，掌握後可靈活應用於網頁、App、後台管理系統等多端介面設計。

文檔與基礎形狀建立

1. 新建 430×430 px、白色背景文檔。
2. 圓角矩形工具（U），半徑 10px 繪製主體形狀，Ctrl+Enter 轉選區，填充白色，命名圖層「box」。

圖層樣式疊加：構建玻璃質感核心

雙擊「box」圖層開啟圖層樣式，依次配置：

漸變疊加

三色漸變：左 #B1DB08 → 中 #66AB04 → 右 #B1DB08，角度 90°，模擬玻璃折射色帶。

內發光

顏色 #D9FF4E，模式「疊加」，不透明度 50%，大小 8px，營造內發光邊緣。

描邊

大小 1px，顏色 #A8D508，模式「正常」，勾勒清晰邊框。

高光細節雕琢：打破平面感

1. 新建圖層「light」，圓角矩形選區填充白色。
2. 執行「濾鏡」→「扭曲」→「鋸齒波」，數量 5、波脊 10、類型「正弦波」，製造波動高光。

3. 圖層不透明度 40%，橡皮擦工具（E）柔邊擦除兩側過渡，形成自然高光帶。

狀態擴展與規範化輸出

複製「box」組，調整漸變色相製作懸停/按下/禁用狀態。整理圖層命名規範（btn/normal, btn/hover...），導出 SVG 或 @2x/@3x PNG 切圖，交付開發零誤差。