網頁按鈕是 UI 設計入門必練題材。本教學展示三種經典立體按鈕的構建邏輯：圓形放射漸變法、圓角矩形角向漸變法、雙形狀混合工具法。三種方法分別對應不同視覺風格與技術路線，掌握後可靈活組合應用於各類介面元素。

按鈕一：經典圓形立體按鈕 — 放射漸變雙圓疊加

1. 橢圓工具 (L) + Shift 畫正圓。技巧：按住 Shift 畫標準正圓。
2. 「漸變面板」建立放射狀漸變：中心白色、邊緣藍色。漸變工具 (G) 拖動調整漸變中心位置至圓心偏上 (模擬光源)。
3. 複製圓 (Ctrl+C/F)，縮放工具 (S) 或自由變形工具 (E) 等比縮小 (按 Alt+Shift 從中心縮放)。旋轉微調角度 (參考圖示)。
4. 小圓移至大圓幾何中心 (方向鍵微調像素級對齊)。完成凹陷/凸起視覺暗示。

按鈕二：圓角矩形角向漸變按鈕 — 單物件漸變模擬 3D

1. 圓角矩形工具畫按鈕基礎形 (或矩形 + 效果 > 風格化 > 圓角)。
2. 套用放射狀漸變：漸變中心置於矩形一角 (如左上)，中心白/亮色、四周深色。漸變工具 (G) 精確拖動中心點至角落。
3. 複製矩形 (Ctrl+C/F)，縮小、水平/垂直翻轉 (變換面板翻轉圖示)，置於大矩形中心。利用漸變中心位置差異形成「按下/彈起」視覺暗示。

按鈕三：雙圓角矩形混合工具法 — 可編輯參數化立體感

1. 畫大圓角矩形 (深色)、小圓角矩形 (淺色) 置中對齊。
2. 選取兩者，執行「物件 > 混合 > 建立」 (Ctrl+Alt+B)。
3. 雙擊混合工具，設「指定步數」10-20 步，得平滑過渡層次。
4. 優勢：雙擊混合軸上的任一端點物件，修改其顏色/大小/圓角/位置，整組過渡即時更新，極利於設計迭代。

三種方法對比與選擇建議

方法	視覺風格	可編輯性	適用場景
放射漸變雙圓	經典 Web 2.0 光澤感、強烈凸起感	中 (修改需同步調整兩圓)	圖標按鈕、浮動動作按鈕 (FAB)、裝飾性控制項
角向放射漸變雙矩形	側光照射的薄片感、扁平化偽 3D	中	導航欄按鈕、標籤頁、卡片式介面
混合工具雙形狀	柔和層次過渡、參數化控制最強	最高 (端點修改即時傳播)	設計系統組件庫、需頻繁調整狀態/尺寸/顏色的按鈕

進階擴展：按鈕狀態系統

• 將三組按鈕分別存為「符號」 (F8)，定義 9 切片縮放區域 (物件 > 切片 > 從選區建立切片 → 9 切片設定)，實現任意寬度無失真縮放。
• 外觀面板疊加「預設/懸停/按下/禁用」四狀態填色/描邊/投影，存為「圖形樣式」，一鍵切換狀態。
• 配合「資產導出」面板，一鍵輸出 @1x/@2x/@3x PNG 與 SVG，對接前端開發流程。