三項 Task 進度

TASK-01已完成

建立可理解的品牌色與間距變數

預計修改：style.css

完成後：卡片間距與按鈕品牌色由具名變數控制

TASK-02已完成

修正外溢的選取器範圍

預計修改：style.css

完成後：卡片說明不再被頁面級規則覆蓋

TASK-03本步驟處理

把按鈕 class 從 work-cardbutton 改為 work-cardaction

預計修改：index.html、style.css

完成後：HTML 與 CSS 只剩新 class，舊名稱為零且 hover、focus 規則集中

HTML、CSS、JavaScript 與文件實際異動

展開檔案卡查看必要差異；只有程式碼區可以橫向捲動。

HTML本步驟有異動

檔案：index.html

修改前

<a class="work-card__button" href="#proof">查看證據</a>

修改後

<a class="work-card__action" href="#proof">查看證據</a>

CSS本步驟有異動

檔案：style.css

修改前

.work-card__button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--color-brand); color: #fff; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; }

修改後

.work-card__action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 18px; border: 0; border-radius: 999px; background: var(--color-brand); color: #fff; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform 160ms ease; }
.work-card__action:hover { transform: translateY(-2px); }
.work-card__action:focus-visible { outline: 3px solid #f5c851; outline-offset: 3px; }

JavaScript本練習未使用

檔案：script.js

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。

README／其他文件本練習未使用

檔案：README.md

修改前

本練習沒有這個檔案。

修改後

本步驟不需修改此語言。

怎麼看到結果

準備
先全域搜尋 work-card__button，記錄 HTML 與 CSS 兩個呼叫方。
操作
將兩處改成 work-card__action，刪除舊規則後用滑鼠 hover、Tab 與 DevTools 驗證。
預期
練習作品的舊 class 搜尋為零，新 class 同時控制基本、hover 與 focus 狀態

Solution TASK-03

把按鈕 class 從 work-cardbutton 改為 work-cardaction

完成後可見：HTML 與 CSS 只剩新 class，舊名稱為零且 hover、focus 規則集中

CSS REPAIR LAB

作品卡片

這段文字應維持容易閱讀的品牌色。

查看證據

重構只整理規則，不改變內容責任。

把按鈕 class 從 work-card__button 改為 work-card__action

作品卡片

把按鈕 class 從 work-cardbutton 改為 work-cardaction