昨天我們學會了按鈕的基本元件設計（尺寸、顏色、圓角、hover、disabled），今天要進一步優化按鈕!!

1. 進階按鈕設計

按鈕是網站最常見的互動元件，它的設計會影響使用者感受：

1. 顏色和 hover 效果 → 提示使用者這個元素可點擊
2. disabled 狀態 → 表示目前不可操作，避免誤觸
3. active 狀態 → 使用者點擊時有回饋，增加操作感
4. RWD → 不同裝置按鈕大小、間距合理，易於操作也美觀

2. HTML 結構

<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>
<button class="btn btn-disabled" disabled>禁用按鈕</button>

• class="btn btn-primary"：btn 是共用樣式，btn-primary 是特定顏色
• disabled 屬性：HTML 原生屬性，瀏覽器會自動禁用按鈕

Q：為什麼分共用 + 個別？
→ 共用樣式控制尺寸、圓角、padding 等一致性；個別樣式控制顏色，維護方便
跟之前練習的一樣!

3. CSS 設計邏輯

共用樣式

.btn {
  padding: 10px 20px;          
  border: none;                /* 移除瀏覽器預設邊框 */
  border-radius: 8px;          /* 圓角 */
  font-size: 16px;             /* 字體大小統一 */
  cursor: pointer;             
  transition: all 0.2s ease;   /* hover/active 平滑過渡 */
}

• padding：讓按鈕文字有空間，不會緊貼邊框
• border-radius：圓角
• cursor: pointer：手型提示可點擊
• transition：動態效果平滑

個別顏色樣式

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-primary:hover {
  background-color: #0056b3;   /* hover 顏色變深，提示互動 */
}

.btn-primary:active {
  transform: scale(0.97);      /* 點擊縮小 3%，增加按壓感 */
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

.btn-disabled {
  background-color: #ccc;
  color: #888;
  cursor: not-allowed;          /* 顯示禁止符號 */
}

4. RWD 調整

按鈕在手機和桌面可能需要不同尺寸：

@media (max-width: 768px) {
  .btn {
    width: 100%;       /* 手機上按鈕佔滿寬度 */
    padding: 12px;     /* 增加觸控範圍，方便點擊 */
  }
}

補充：hover 、active、 disabled

1. :hover（滑鼠懸停狀態）

• 當使用者的滑鼠指標移到某個元素上時觸發!
• 常用場景：連結、按鈕、圖片的「滑過變化」
  範例：

button:hover {
  background-color: blue; /* 滑鼠移上去變藍 */
  color: white;
}

注意：

• 只在桌面裝置上有意義，行動裝置（手機、平板）通常不支援真正的 hover
• 常用來提示使用者「這個東西可以點」

2. :active（點擊中/按下狀態）

• 當元素被使用者「按下」的瞬間（點擊中尚未放開時）會觸發
• 常用場景：按鈕被按下的按壓效果、超連結點擊狀態
  範例

button:active {
  transform: scale(0.95); /* 按下去有縮小的感覺 */
  background-color: darkblue;
}

注意：

• 狀態只在「按下的瞬間」存在，放開後會回到 正常 或 :hover 狀態
• 常用於讓使用者有「按下去」的即時回饋

3. :disabled（禁用狀態）

• 當元素被設定為不可使用時，樣式會套用此狀態
• 常用場景：表單按鈕在未填寫完整時禁用、輸入框不可輸入時
  範例：

<button disabled>送出</button>

button:disabled {
  background-color: gray;
  cursor: not-allowed; /* 滑鼠指標變成禁止符號 */
  opacity: 0.5;
}

注意：

• disabled 是 HTML 屬性，CSS 的 :disabled 是用來選取有這個屬性的元素
• 禁用狀態下，元素不會有 :hover 和 :active 效果

總結：

• 共用 + 個別：按鈕尺寸、圓角、文字由共用控制，顏色由個別控制
• RWD：要隨不同裝置調整
• :hover → 滑鼠移上去時的視覺效果（互動提示）
• :active → 按下時的即時回饋（點擊瞬間效果）
• :disabled → 元素不可操作時的樣式（無法互動)，避免誤操作