水晶質感按鈕以其通透高光、折射邊緣、內部倒影，是高端 UI/圖標設計的經典題材。本教學透過大量步驟截圖，詳細拆解水晶按鈕的圖層結構與樣式參數，涵蓋基礎形狀、倒角高光、內部折射、頂部高光、投影、文字/圖標內嵌等完整要素，適合 UI 設計師建立可複用的水晶按鈕組件庫。

最終效果展示 (多狀態/多顏色)

核心圖層結構拆解 (自下而上)

1. 背景底圖層： 深色漸層背景，襯托水晶通透感。
2. 按鈕基礎形狀層： 圓角矩形/圓形向量形狀，填充 0%，核心樣式：
   • 斜面與浮雕：內部斜面、平滑、深度 100%+、大小匹配按鈕厚度、角度 120°/高度 30°、高光模式「顏色減淡」白色 70%、陰影模式「正片疊底」深色 50%。
   • 內發光：模式「螢幕」、顏色淡藍/白、不透明度 30%、大小 10-20px (模擬邊緣折射)。
   • 內陰影：距離 0、大小 15-30px、不透明度 30% (模擬厚度陰影)。
   • 描邊：1-2px、漸層填充 (淺→深)、位置「內部」。
3. 頂部高光帶層： 矩形選區頂部 1/3 → 白到透明漸層 → 模式「螢幕」/「線性減淡」不透明度 40-60%。
4. 側邊折射高光層： 筆刷/選區繪製側邊細高光條 → 模式「螢幕」/「疊加」。
5. 內部倒影/花紋層： 複製基礎形狀 → 縮小/垂直翻轉 → 不透明度 10-20% → 裁切蒙版限制於按鈕內部。
6. 文字/圖標層： 置於頂部，樣式：投影 (正片疊底、距離 1px) + 內發光 (螢幕、白、小範圍) 確保可讀性。
7. 外部投影群組： 整體群組添加投影：距離 5-10px、大小 15-20px、不透明度 30-50%。

關鍵參數速查表

樣式項目	關鍵數值	作用
斜面與浮雕 - 深度	150-200%	強化 3D 凸起感
斜面與浮雕 - 高光模式	顏色減淡 / 線性減淡	高光穿透底色、更通透
內發光 - 模式	螢幕 / 線性減淡	邊緣折射發光感
內陰影 - 距離	0	均勻內包陰影、模擬厚度
描邊 - 填充類型	漸層 (淺→深)	邊框立體倒角感
頂部高光 - 模式	螢幕 / 線性減淡	頂部受光最亮面

組件化建議

1. 將上述圖層結構整理為群組「Crystal_Btn_Base」。
2. 儲存圖層樣式為「Water_Crystal_Style」。
3. 建立「智慧物件」包含文字/圖標，雙擊即可替換內容自動套用樣式。
4. 制作動作記錄「建立水晶按鈕」：新建群組→套用樣式→建立智慧物件，單鍵生成新按鈕。
5. 導出不同狀態 (Normal/Hover/Pressed/Disabled) 為 PNG/WebP，或輸出 CSS 參數供前端實現。

延伸變化

• 彩色水晶： 基礎形狀填充 10-20% 不透明度顏色，或加「顏色疊加」樣式。
• 發光水晶： 外發光 (螢幕、品藍/紫、大小 20px) + 動畫脈動。
• 冰晶質感： 色調偏藍白、增加雜訊/破碎紋理、高光更銳利。
• 寶石切面： 用多邊形工具建立多面體選區，分面套用不同角度漸層。

水晶按鈕的精髓在於「高光與折射的層層疊加」，每一層看似微弱，疊加後才形成那種令人想觸摸的晶瑩質感。建立組件庫後，你將擁有隨時可部署的高端 UI 視覺語言！