專案產出：可直接上線的按鈕組件

本教程不僅教繪製 170×50px 時尚按鈕，更完整呈現「PS 設計→切圖命名→HTML 結構→CSS 樣式→Hover 狀態交互」的完整前端交付流程。適用於 UI 設計師、前端工程師、全棧工程師跨角色協作參考。

PS 設計篇：八步構建像素級完美按鈕

步驟 1-2：文檔與基礎形狀

• 新建 600×600px 文檔（大畫布便於修改）；
• 圓角矩形工具（U），半徑 5px，繪製 170×50px 路徑 → Ctrl+Enter 轉選區 → 新建圖層填充黑色 #000000。

步驟 3：圖層樣式賦予立體質感

雙擊圖層開啟樣式面板：

• 漸變疊加：線性、角度 90°、縮放 100%、顏色點：左 #1A6BA5（50%）、右 #2877AC（100%）；
• 描邊：大小 1px、位置「內部」、混合模式「正常」、不透明度 100%、顏色 #2877AC。

步驟 4：斜線紋理細節（自定義圖案填充）

1. 新建 4×4px 透明文檔 → Ctrl+Space 放大 1600% → 鉛筆工具 1px 白色繪製對角線兩像素 → 編輯→定義圖案，命名「diagonal_line_pattern」；
2. 回主文檔，Ctrl+點擊按鈕圖層載入選區 → 按鈕層上方新建圖層 → 編輯→填充→圖案選「diagonal_line_pattern」；
3. 選擇→修改→收縮 2px → Ctrl+Shift+I 反選 → Delete 刪除邊緣保留描邊 → 圖層模式「柔光」，不透明度 20%。

步驟 5-6：文字與圖標排版

• 文字工具：「Buy Now」，字體微軟雅黑/Helvetica Neue，24pt，白色 #FFFFFF → 圖層樣式→投影：顏色 #2877AC、距離 1px、大小 0、不透明度 50%；
• 自定形狀工具選「右箭頭」→ 繪製 13×13px 白色 → 複製文字投影樣式（右鍵→複製圖層樣式→貼上）。

步驟 7：Hover 狀態製作（組複製法）

1. 圖層面板新建組「Normal」，將除背景外所有圖層拖入；
2. Alt 拖動「Normal」組至「新建圖層」圖標 → 複製組重命名「Hover」；
3. 展開「Hover」組，雙擊「黑色圖形」圖層修改漸變疊加：左 #0D4A7A、右 #1A6BA5（整體偏深），模擬按下/懸停視覺反饋。

步驟 8：切片輸出與命名規範

• 切片工具（C）框選按鈕區域（含 Normal/Hover 兩狀態垂直排列）；
• 文件→存儲為 Web 所用格式 → GIF/PNG-24，命名 web_button.png（雙狀態垂直拼合單圖，CSS 通過 background-position 切換）。

前端交付篇：零還原度損失的代碼實現

HTML 結構（語義化）

<a id="web_button" href="#" class="btn">Buy Now</a>

CSS 樣式（精準還原 PS 視覺參數）

<style type="text/css">
#web_button {
    display: inline-block;          /* 支援寬高 */
    width: 170px;
    height: 50px;
    background: url(web_button.png) no-repeat 0 0;
    text-indent: -9999px;           /* 隱藏文字，保留 SEO/無障礙 */
    outline: none;                  /* 移除焦點虛線框 */
    border: none;
    cursor: pointer;
}

#web_button:hover,
#web_button:focus {
    background-position: 0 -50px;   /* 垂直偏移 50px 顯示 Hover 狀態 */
}
</style>

進階擴展：響應式與無障礙增強

• Rem/Em 單位：寬高改用 rem 配合根字體大小，適配不同縮放等級；
• ARIA 標籤：aria-label="立即購買" 補充語義；
• Focus-visible：:focus-visible { outline: 2px solid #2877AC; } 鍵盤導航可見焦點；
• CSS 變量：將顏色、尺寸提取為 --btn-bg, --btn-hover-bg 等變量，主題切換一鍵生效。

延伸學習：更多精彩教程請關注三聯 Photoshop 教程欄目，三聯 PS 群：75789345 歡迎加入交流。