傳統按鈕設計需手動繪製高光、陰影、邊緣、投影，繁瑣且難統一。Illustrator 3D「擠出與斜角」配合外觀面板非破壞編輯，能一鍵生成物理正確的立體按鈕，並封裝為可複用的圖形樣式，構建完整按鈕設計系統。本教程完整拆解 11 步流程。

核心優勢：為什麼用 3D 效果做 2D 按鈕？

• 物理正確性： 光源、斜角、投影自動遵循 3D 幾何規則，避免手繪透視錯誤。
• 參數化控制： 擠出深度、斜角形狀、光源位置、表面屬性均可即時數值調整。
• 樣式複用： 外觀面板屬性可存為圖形樣式，跨文件、跨專案一鍵套用。
• 多狀態衍生： 基礎 3D 形狀不變，僅調整填色/透明度/效果即可生成 Default/Hover/Active/Disabled 四態。

11 步完整製作流程

步驟 1：按鈕基礎形狀

圓角矩形工具，點擊畫板輸入：寬 180px、高 44px、圓角 6px。填色：淺灰 #E0E0E0（佔位，後續由外觀面板覆蓋）。

步驟 2：3D 擠出與斜角設定

選取形狀，效果 > 3D > 擠出與斜角。關鍵參數：

• 位置：等軸測左面（或自訂 X 軸 -18°，Y 軸 -26°，Z 軸 0°）
• 擠出深度：6pt（決定按鈕厚度/側面高度）
• 斜角：圓形，高度 4pt（決定邊緣圓潤度）
• 表面：塑膠著色，光源左上（X: -100, Y: -100, Z: 100），環境光 30%
• 勾選「預覽」即時觀察

步驟 3：微調 3D 參數至滿意

調整：X 軸旋轉 -12°、斜角高度 6pt、光源微偏左。確定後外觀面板出現「3D 擠出與斜角」效果項。

步驟 4：展開外觀並著色內部面

物件 > 展開外觀。直接選取工具 (A) 選中內部圓角矩形（正面），填線性漸變：#4A90E2 → #357ABD，角度 -90°。外觀面板雙擊「內容」進入隔離模式，添加「內發光」：模式「正片疊底」，顏色 #1A3A5C，不透明度 40%，模糊 3px。

步驟 5：疊加發光層增強質感

外觀面板中複製填色項（底部「複製所選項目」圖示）。修改：漸變改「黑 → 白」，角度 50°，混合模式「濾色」，不透明度 75%。再複製一次：角度 140°，不透明度 80%。

步驟 6：藝術筆刷繪製頂部高光線

直接選取工具選中內部矩形，物件 > 路徑 > 添加錨點 兩次。剪刀工具 (C) 點擊兩側錨點切開，刪除底部路徑。新建藝術筆刷：100×3px 橢圓 → 拖入筆刷面板 → 選「藝術筆刷」，拉伸模式「筆刷比例比例」。套用至頂部路徑，描邊 2pt，白色，「螢幕」模式。

步驟 7：側面投影構建立體感

再次複製內部矩形，拖出群組置於按鈕群組之前。移除外觀，填黑。複製置前 Ctrl/Cmd + F，填紅（區分用）。向上移動 2px（鍵盤增量設 1px）。選中兩形狀，路徑查找器「減去頂層」→「展開」。剩餘薄形填黑，混合模式「正片疊底」，不透明度 20%。

步驟 8：中間光澤帶

鋼筆工具畫彎曲路徑貫穿按鈕中部。內部矩形複製置前，移除外觀，描邊黑。選路徑與矩形，路徑查找器「分割」，取消群組，刪除底部。填「黑 → 白」線性漸變，角度 -90°，混合模式「濾色」，不透明度 30%。

步驟 9：文字與投影

文字工具輸入「TRY NOW」，字體 Anja Eliane/35pt。物件 > 擴展，填線性漸變（白 → #E8F0FE），角度 -45°。添加「投影」：X: 1px, Y: 1px, 模糊 2px, 色 #000, 不透明度 40%。副標題「30 DAY TRIAL」，Arial Bold/15pt，白色，同樣投影。

步驟 10：箭頭圖標系統化處理

符號庫「箭頭」→ 箭頭 24，拖出並「斷開符號鏈接」。取消群組×2。效果 > 風格化 > 圓角 3px。填線性漸變（#4A90E2 → #357ABD），描邊 0.5pt #2E6DA4。添加投影。複製縮放 80%，水平/垂直鏡像複製形成四向箭頭組，對齊分佈。

步驟 11：底部柔邊投影收尾

橢圓工具畫扁橢圓（寬 120px、高 8px），填黑，置按鈕之後。物件 > 路徑 > 偏移路徑 7px。大橢圓不透明度 0%，小橢圓 100% 黑。選中兩者，物件 > 混合 > 混合選項 指定步數 25，建立混合。群組不透明度 75%，混合模式「正片疊底」。

設計系統化延伸

• 圖形樣式庫： 將完整外觀屬性存為 `Button/Primary/Default`、`Button/Primary/Hover`（基底色亮度 +10%）、`Button/Secondary`（描邊取代填色）等。
• 設計令牌映射： 將漸變色標、陰影參數、圓角半徑導出為 JSON，前端直接消費，確保設計與代碼零偏差。
• 響應式變體： 利用「響應式縮放」腳本，自動生成 32px/40px/48px/56px 高度變體，內部間距、字號、圖標尺寸按比例縮放。
• 無障礙檢查： 對比度 ≥ 4.5:1（正常文字）、≥ 3:1（大文字/圖形），焦點狀態可見度符合 WCAG 2.1 AA。

此流程將「畫按鈕」升級為「設計按鈕系統」。掌握 3D 效果與外觀面板的組合邏輯，你將能在幾分鐘內產出符合設計系統規範、支援多狀態、可直接交付前端實現的專業級按鈕資產。