##按下按鈕從文字到圖片，驚喜互動操作直觀又有趣！
Button的圖文互換也是卡住新手一段時間丫XD~小小提示：互換的要放在同一層級

##為什麼要有這功能
在現代網頁設計中，按鈕不僅僅是一個單純的文字或點擊區域。為了提升用戶體驗，常常需要根據不同的按鈕狀態（例如 hover、active）來動態變換按鈕內的內容，例如將文字切換為圖片或改變按鈕的外觀。這種功能可以更直觀地讓用戶知道他們的操作是否被系統接收並生效，例如顯示確認圖示代替文字，讓操作反饋更加清晰。

##核心結構
該功能的實現基於 CSS 及 HTML 結構，關鍵在於按鈕內部不同的 元素，其中一個顯示預設狀態的文字，另外兩個則分別顯示在 hover 和 active 狀態下的圖片。透過 display 屬性來控制不同狀態下的內容顯示與隱藏，並且所有需要切換的元素必須在同一個父級元素內，這樣 hover 和 active 狀態才能正確切換。

##主要功能
預設顯示按鈕文字，讓使用者了解按鈕功能。
當滑鼠懸停在按鈕上時，按鈕文字消失，顯示提示圖示以提示下一步動作。
當按鈕被點擊（active 狀態）時，顯示不同的圖示，提供即時反饋。
確保所有按鈕狀態轉換流暢且一致，增強視覺上的反應和操作感。

##注意事項
父級元素要求：所有變換內容必須位於同一父級元素內，否則 hover 和 active 狀態的圖片切換不會生效。
按鈕大小設計：按鈕應具備足夠的寬度和高度，以便能正確顯示文字和圖片，避免文字或圖片被裁切。
圖片大小和比例：在切換圖片時，應確保圖片的大小和比例適合按鈕的設計風格，以免影響整體布局。

##簡單範例應用

<style>
  /* 按鈕的基本樣式，設定寬度、填充、取消邊框和背景色 */
  .btn1 {
    min-width: 200px; /* 最小寬度 */
    padding: 10px; /* 內邊距，讓按鈕內的文字或圖示有空間 */
    border: none; /* 取消按鈕邊框 */
    background-color: lightblue; /* 設定按鈕背景色為淺藍色 */
    position: relative; /* 確保按鈕內元素相對定位 */
  }

  /* 按鈕內的預設文字顯示樣式 */
  .btn-word {
    display: block; /* 預設顯示文字 */
    font-size: 16px; /* 設定文字大小 */
  }

  /* 預設情況下，隱藏 hover 和 active 狀態下的圖示 */
  .btn-hover-img, .btn-active-img {
    display: none; /* 預設隱藏圖片 */
  }

  /* 當滑鼠懸停在按鈕上時 */
  .btn1:hover .btn-word {
    display: none; /* 隱藏預設顯示的文字 */
  }

  .btn1:hover .btn-hover-img {
    display: block; /* 顯示滑鼠懸停狀態的圖片 */
  }

  /* 當按下按鈕時 */
  .btn1:active .btn-word {
    display: none; /* 隱藏預設顯示的文字 */
  }

  .btn1:active .btn-active-img {
    display: block; /* 顯示按下狀態的圖片 */
  }
</style>
<div class="button-container" style="display: flex; justify-content: center;">
  <!-- 按鈕容器，使用 Flexbox 使按鈕在頁面中間對齊 -->
  <button type="button" class="btn1" id="score_complete_btn" style="min-width: 200px;">
    <!-- 預設顯示的按鈕文字 "送出完成" -->
    <div class="btn-word">送出完成</div>                    
    <!-- 當滑鼠懸停時顯示的圖示 -->
    <div class="btn-hover-img">
      <img src="../image/check-line.png" alt="Hover Icon" style="width: 18px; height: 18px; margin-left: 12px; margin-bottom: 5px;">
    </div>
    <!-- 當按下按鈕時顯示的圖示 -->
    <div class="btn-active-img">
      <img src="../image/check-line-1.png" alt="Active Icon" style="width: 18px; height: 18px; margin-left: 12px; margin-bottom: 5px;">
    </div>
  </button>
</div>