按鈕是 UI 中最關鍵的元素之一
按鈕不只是視覺元素，它是用戶與你的界面之間的主要交互點。每一次表單送出、每一次頁面跳轉、每一個 CTA——都通過按鈕發生。
設計好的按鈕讓互動流暢自然；設計差的按鈕製造摩擦、降低轉換率、讓用戶感到困惑。
按鈕的 5 個視覺狀態
每個按鈕都需要設計 5 種狀態：
1. 預設狀態（Default）
按鈕的基本外觀——清楚可見、與背景有足夠對比。
2. Hover 狀態
鼠標移上去時的外觀變化，告訴用戶「這個是可以互動的」。
常見設計：
- 背景色加深 10–15%
- 輕微的 box-shadow 加深
- 微縮放（scale 1.02–1.05）
重要： Hover 狀態必須清楚可見，但不要讓它看起來像是「按下去之後的狀態」——Hover 和 Active 應該視覺上有所區別。
3. Active/Pressed 狀態
按鈕被按下時（mousedown 但尚未 mouseup）的外觀。
常見設計：背景色再加深、輕微縮小（scale 0.97）、內陰影（inset shadow）
4. Focus 狀態
使用鍵盤 Tab 鍵導航到按鈕時的外觀。
這個狀態對無障礙設計（Accessibility）至關重要。Focus 狀態必須清楚可見——WCAG 要求 Focus 指示器有足夠的對比度。
常見設計： 2–4px 的 outline，顏色與按鈕顏色形成對比（例如白色背景上的深藍 outline）
絕對不要做的事： 用 outline: none 移除 Focus 樣式——這讓僅使用鍵盤的用戶（包括視障者和不使用滑鼠的用戶）完全無法導航你的網站。
5. Disabled 狀態
按鈕暫時不可用時的外觀。
常見設計：透明度降低（opacity: 0.5）、游標改為 cursor: not-allowed
注意： 被 disabled 的按鈕仍然需要告訴用戶「為什麼這個按鈕現在不可用」——不要只是讓它灰掉，最好在旁邊解釋原因（例如「請填完所有必填欄位後送出」）。
按鈕尺寸的最佳實踐
桌機版
最小高度：44px（Apple 和 Google 的設計規範都以此為最小可觸控尺寸）
建議：48–52px
手機版
最小高度：48px（更大的手指容易點擊）
寬度：在行動版，重要的 CTA 按鈕應該設為全寬（width: 100%），讓拇指從任何位置都能點到
內距（Padding）
按鈕文字周圍需要有足夠的空間：
- 水平內距：文字高度的 1.5–2 倍
- 垂直內距：文字高度的 0.75–1 倍
例如：14px 字體的按鈕，建議 padding: 12px 28px。
按鈕文字的最佳實踐
描述行動，而非只說「動作」：
弱：「送出」「確認」「點這裡」
強：「預約免費諮詢」「立即取得報價」「下載完整指南」
長度： 2–5 個字最理想。超過 7 個字的按鈕文字開始難以快速掃讀。
大寫字母： 避免在中文按鈕中混入全大寫的英文，這讓按鈕顯得雜亂。如果有英文，統一首字大寫（Title Case）或全小寫。
主要按鈕 vs 次要按鈕的層次
每個頁面上最多應該有 1 個「主要按鈕」（Primary Button）——最重要的行動邀請，視覺最突出。
如果需要多個按鈕選項，用視覺層次區分：
- Primary Button： 填色按鈕，品牌主色或強調色
- Secondary Button： 空心按鈕（Outline），較低視覺重量
- 文字連結（Ghost）： 沒有背景和邊框，最低重量
用戶的眼睛自然首先看到 Primary Button，然後才考慮其他選項。
無障礙設計要點
□ 按鈕文字（或 aria-label）清楚描述按鈕的動作
□ Focus 狀態清楚可見
□ 主要按鈕與背景的顏色對比度 ≥ 4.5:1
□ 觸控面積最小 44×44px
□ 使用 button 元素（而非 div 模擬的按鈕），確保鍵盤操作正常
□ disabled 狀態有適當的 aria-disabled 屬性
好的按鈕設計是「不被注意到的」——用戶在需要互動時自然知道點哪裡，不需要思考。這就是好的 UX 設計的本質。