建立按鈕共用基底
修改檔案：style.css
完成後看見：所有按鈕具有一致尺寸、圓角與字重
第 08 章交棒
定位完成後，開始整理可以重用的外觀
上一章用 relative、absolute 與 fixed 決定小物件跟誰走；本章保留定位結果，只把按鈕與卡片的共同外觀收成 class。
可重複使用的元件
服務
網站內容整理
把複雜資訊改寫成容易閱讀的頁面。
作品
品牌形象頁
用一致視覺呈現品牌個性與主要行動。
聯絡我
請來信 [email protected] 討論合作。
CHAPTER 09 · PRACTICE WORKSPACE
完成可重複套用的按鈕與卡片樣式組
TASK STATUS
修改檔案：style.css
完成後看見：所有按鈕具有一致尺寸、圓角與字重
修改檔案：style.css
完成後看見：兩種按鈕有清楚的行動層級
修改檔案：style.css
完成後看見：作品與服務卡片共用一致邊框及留白
WORKSPACE
先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。
FOCUS TASK · TASK-01
比較：共同尺寸、圓角與字重放在 .button，只有用途差異才放到變體 class。
現在做：在 Starter 的 DevTools 選取兩個 .button，先只在 .button 加上 display: inline-flex、padding: 12px 20px、border-radius: 10px、font-weight: 800；重新整理後量兩顆按鈕的高度與 Computed 值，暫時關閉 .button 的 padding，再重跑並記錄哪個結果一起消失。
預期：完成後能觀察到「所有按鈕具有一致尺寸、圓角與字重」，並說出共同尺寸、圓角與字重放在 .button，只有用途差異才放到變體 class。
證據：用前後截圖或口述比較「所有按鈕具有一致尺寸、圓角與字重」，指出這個小型實驗如何證明共同尺寸、圓角與字重放在 .button，只有用途差異才放到變體 class。
比較：HTML class 可以組合共同基底與用途變體，不需要複製整段 CSS。
現在做：在 Starter 的 Elements 暫時複製「查看作品」連結，將複製品的 class 改成 button，保留 href 與文字；比較它與原本 button button--primary 的 Computed padding、border-radius、height，再移除 button 重跑，最後刪除複製品。
預期：完成後能觀察到「所有按鈕具有一致尺寸、圓角與字重」，並說出HTML class 可以組合共同基底與用途變體，不需要複製整段 CSS。
證據：用前後截圖或口述比較「所有按鈕具有一致尺寸、圓角與字重」，指出這個小型實驗如何證明HTML class 可以組合共同基底與用途變體，不需要複製整段 CSS。
完成條件：DONE-01：所有按鈕一致，且新增測試按鈕只加 .button 即取得共同外觀。
第 08 章交棒
上一章用 relative、absolute 與 fixed 決定小物件跟誰走；本章保留定位結果，只把按鈕與卡片的共同外觀收成 class。
服務
把複雜資訊改寫成容易閱讀的頁面。
作品
用一致視覺呈現品牌個性與主要行動。
請來信 [email protected] 討論合作。
CONTINUE
前往 Checkpoint 1，依要求完成「建立按鈕共用基底」。