建立按鈕共用基底
修改檔案：style.css
完成後看見：所有按鈕具有一致尺寸、圓角與字重
第 08 章交棒
定位完成後，開始整理可以重用的外觀
上一章用 relative、absolute 與 fixed 決定小物件跟誰走；本章保留定位結果，只把按鈕與卡片的共同外觀收成 class。
可重複使用的元件
服務
網站內容整理
把複雜資訊改寫成容易閱讀的頁面。
作品
品牌形象頁
用一致視覺呈現品牌個性與主要行動。
聯絡我
請來信 [email protected] 討論合作。
CHAPTER 09 · PRACTICE WORKSPACE
完成可重複套用的按鈕與卡片樣式組
TASK STATUS
修改檔案：style.css
完成後看見：所有按鈕具有一致尺寸、圓角與字重
修改檔案：style.css
完成後看見：兩種按鈕有清楚的行動層級
修改檔案：style.css
完成後看見：作品與服務卡片共用一致邊框及留白
WORKSPACE
已完成 TASK-01；先核對可見結果，再前往 TASK-02。
FOCUS TASK · TASK-02
比較：兩種變體應表達行動優先順序，不能只用兩個任意顏色製造差異。
現在做：在 Checkpoint 1 的 .button--primary、.button--secondary 只加入最小差異：primary 使用 filled background #0c7656、白色文字；secondary 使用透明背景、#0c7656 邊框與文字；先用滑鼠查看兩顆，再用 Tab 依序聚焦，記錄 filled／outlined 與用途的對應。
預期：完成後能觀察到「兩種按鈕有清楚的行動層級」，並說出兩種變體應表達行動優先順序，不能只用兩個任意顏色製造差異。
證據：用前後截圖或口述比較「兩種按鈕有清楚的行動層級」，指出這個小型實驗如何證明兩種變體應表達行動優先順序，不能只用兩個任意顏色製造差異。
比較：顏色是視覺線索，按鈕文字與用途才是使用者理解行動層級的主要依據。
現在做：在 Elements 暫時把「查看作品」的 class 從 button button--primary 換成 button button--secondary，保留文字與 href；先觀察外觀層級翻轉，再用 Tab 確認仍可聚焦，最後恢復原本 class。
預期：完成後能觀察到「兩種按鈕有清楚的行動層級」，並說出顏色是視覺線索，按鈕文字與用途才是使用者理解行動層級的主要依據。
證據：用前後截圖或口述比較「兩種按鈕有清楚的行動層級」，指出這個小型實驗如何證明顏色是視覺線索，按鈕文字與用途才是使用者理解行動層級的主要依據。
完成條件：DONE-02：兩種按鈕層級清楚，變體沒有複製基底幾何規則。
第 08 章交棒
上一章用 relative、absolute 與 fixed 決定小物件跟誰走；本章保留定位結果，只把按鈕與卡片的共同外觀收成 class。
服務
把複雜資訊改寫成容易閱讀的頁面。
作品
用一致視覺呈現品牌個性與主要行動。
請來信 [email protected] 討論合作。
CONTINUE
前往 Checkpoint 2，依要求完成「建立主要與次要按鈕變體」。