今天要介紹從簡單的變色效果到複雜的文字下劃線動畫，用 CSS 屬性如 background-color, box-shadow, linear-gradient, 以及 transform
來實現這些效果

通用 HTML

所有按鈕效果使用相同的 HTML 結構：

<button class="btn">Hello!</button>

通用 CSS

body 和按鈕的基礎樣式在所有範例中保持一致：

body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
}

.btn {
   padding: 10px 20px;
   font-size: 16px;
   border-radius: 5px;
   transition: all 0.3s ease;
   cursor: pointer;
}

• body : 居中顯示按鈕
• .btn ： 設置按鈕的基本樣式和過渡效果

1. 簡單變色懸停效果

當鼠標懸停時，按鈕背景色從藍色變為綠色

.btn {
   background-color: #3498db;
   color: white;
   border: none;
}
.btn:hover {
   background-color: #2ecc71;
}

• .btn : 按鈕默認背景色為藍色，字體為白色
• border: none : 移除元素的邊框
• .btn:hover ： 鼠標懸停時，背景色變為綠色

2. 邊框伸展效果

懸停時，按鈕背景變成藍色，文字變為白色

.btn {
   background-color: transparent;
   color: #3498db;
   border: 2px solid #3498db;
}

.btn:hover {
   background-color: #3498db;
   color: white;
}

• .btn : 按鈕默認透明背景，藍色的邊框和文字
• border: 2px solid #3498db : 寬度 2 像素，邊框為實線，邊框藍色
• .btn:hover ： 鼠標懸停時，背景變為藍色，文字變為白色

3. 漸變背景懸停效果

懸停時，按鈕背景變為漸變色。

.btn {
   background-color: #3498db;
   color: white;
   border: none;
}

.btn:hover {
   background: linear-gradient(45deg, #e74c3c, #f39c12);
}

• .btn ： 按鈕默認背景色為藍色，字體為白色，無邊框
• .btn:hover ： 鼠標懸停時，背景變為紅色到橙色的漸變效果
• background: linear-gradient(45deg, #e74c3c, #f39c12) : 使用線性漸變來設置背景
  • linear-gradient : 用於創建線性漸變背景
  • 45deg : 漸變的角度，表示漸變方向為 45 度角
  • #e74c3c : 起始顏色（紅色）
  • #f39c12 : 結束顏色（橙色）

4. 按鈕陰影懸停效果

當懸停時，按鈕會出現陰影效果，產生浮動感。

.btn {
  background-color: #3498db;
  color: white;
  border: none;
}

.btn:hover {
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* 懸停時增加陰影 */
}

• .btn ： 按鈕默認背景色為藍色，字體為白色，無邊框
• .btn:hover ： 鼠標懸停時，添加陰影效果，使按鈕看起來浮起來
• box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3) : 設置陰影效果
  • x 軸-位移 | y 軸-位移 | 模糊值 blur-radius｜顏色 :
    • x 軸-位移 : 0px
      水平偏移量，陰影不向左右移動
    • y 軸-位移 : 4px
      垂直偏移量，陰影向下偏移 4 像素
    • 模糊值 blur-radius : 15px
      模糊半徑，陰影的模糊程度，數值越大，陰影越模糊
    • 顏色 : rgba(0, 0, 0, 0.3)
      陰影顏色為黑色，透明度為 0.3

5. 文字下劃線懸停效果

當懸停時，按鈕中的文字會出現從左到右的下劃線動畫。

.btn {
   background-color: transparent;
   color: #3498db;
   border: none;
   position: relative; /* 設置按鈕為相對定位，使得後續的絕對定位子元素能夠相對於這個按鈕進行定位 */
}
}

.btn:before {
   content: ''; /* 插入一個空內容，用來作為下劃線的基礎 */
   position: absolute; /* 絕對定位，相對於 .btn 元素進行定位 */
   width: 100%;
   height: 2px;
   bottom: 0; /* 位於按鈕底部 */
   left: 0;  /* 從按鈕左邊開始 */
   background-color: #3498db; /* 下劃線顏色為藍色 */
   visibility: hidden; /* 初始狀態下，隱藏下劃線 */
   transform: scaleX(0); /* 初始狀態下，下劃線的水平縮放比例為 0，隱藏狀態 */
   transition: all 0.3s ease-in-out; /* 設置動畫過渡效果，所有屬性在 0.3 秒內平滑過渡，使用 ease-in-out 函數 */
}

.btn:hover:before {
   visibility: visible; /* 鼠標懸停時，顯示下劃線 */
   transform: scaleX(1); /* 鼠標懸停時，下劃線的水平縮放比例變為 1，顯示完整的下劃線 */
}

• .btn ： 按鈕默認透明背景(transparent)，藍色文字
• .btn:before ： 添加一個下劃線，默認隱藏，且不顯示
• .btn:hover:before ： 鼠標懸停時，顯示下劃線並平滑顯示