四圖層疊加構建晶瑩剔透質感

透過四層圓角矩形的漸層疊加、Photoshop 動態效果（內陰影/倒角浮雕/光澤）與虛線高光細節，純矢量打造極具玻璃質感的水晶按鈕，可直接套用於 Web UI 介面。

圖層結構自下而上

1. BG1（底層殼）： 115×32 px 圓角矩形，調整圓角半徑 → 加 PS 動態效果（內陰影/倒角浮雕/光澤）建立基礎厚度與邊框高光（圖 2-3）。
2. BG2（實心底）： 複製 BG1，縮小 1 px (114×31)，移除 PS 效果，填充 #A9A9A9 實心灰 → 形成內部實體感（圖 4）。
3. BG3（放射漸層光）： 複製 BG2，填充放射性漸層（中心亮→邊緣暗）→ 模擬光線穿透玻璃的聚散效果（圖 5）。
4. BG4（線性漸層反光）： 複製 BG3，填充線性漸層（頂亮→底暗）→ 強化頂部高光帶（圖 6）。

細節點綴

• 白色虛線高光： 矩形工具畫小正方形，白色線性漸層、調整透明度，排列成虛線狀置於頂部邊緣（圖 7）。
• 投影落地： 底層加投影，距離/柔和/不透明度參考成品圖（圖 8）。

此結構完全矢量、圖層邏輯清晰，修改顏色、尺寸、圓角、光照方向只需調整對應圖層參數，極適合建立設計系統的按鈕組件庫。