網頁按鈕「預設態/懸停態」雙圖合一 Sprite 圖製作教學。從畫布規劃、圓角矩形建立、選區填充、圖層樣式（漸變疊加、內陰影、描邊、徑向漸變高光）、複製修色、文字垂直水平置中、外陰影，到最終輸出 PNG 並撰寫基礎 HTML/CSS 雛形，完整呈現設計交付前端的標準流程。

成品與 Demo 預覽

畫布與基礎形狀

1. 新建 250×100 px（寬×高），垂直置中拉一條參考線（Ctrl+R 標尺拖曳），上半部預設態、下半部懸停態。
2. 圓角矩形工具（U），半徑 3px，上半部拖 250×50 px 圓角矩形 → Ctrl+點擊 載入選區 → 新建圖層「Idle」填充任意色 → 刪除形狀層。

Idle 態圖層樣式（綠色系）

• 漸變疊加：深綠 #618926 → 淺綠 #98ba40，中點 35%。
• 內陰影：模式「正常」、顏色 #c6d894、不透明度 100%、距離/大小 2px。
• 描邊：1px、位置「內部」、顏色 #618926。
• 徑向漸變高光：新建圖層「Radial_Gradient」 → Ctrl+點擊 Idle 載入選區 → 漸變工具（G）模式「徑向」、前景 #b8cf69 到透明 → 從頂部拖至選區下 30px → 不透明度 80%。

Rollover 態：複製修色

1. 複製「Idle」→ 更名「Rollover」；複製「Radial_Gradient」→ 更名「Radial_Gradient_Rollover」→ 移至下半部對齊參考線。
2. 修改圖層樣式顏色：內陰影 #839dbf、漸變疊加 #0f2557→#245293、描邊 #0f2557。
3. Radial_Gradient_Rollover 加「顏色疊加」#5c737c。

文字與對齊

• 文字工具（T）：Arial Bold 16px、白色、平滑 → 輸入文字。
• 外陰影：模式「正常」、顏色 #618926、不透明度 100%、角度 -60°、距離/大小 1px。
• Ctrl+點擊 Idle 載入選區 → 選中文字層 → Layer → Align Layers to Selection → Vertical/Horizontal Centers 置中。
• 複製文字層 → 移至下半部 → Ctrl+點擊 Rollover 載入選區 → 同樣置中 → 改外陰影色 #0f2557。

HTML/CSS 雛形（供前端參考）

<a href="#" class="btn">Button Text</a>

.btn {
  display: inline-block;
  width: 250px; height: 50px;
  background: url(campaign-monitor-button.png) 0 0 no-repeat;
  text-indent: -9999px; /* 文字由圖片承載 */
}
.btn:hover { background-position: 0 -50px; }