昨天跟 CSS 單位開完同學會，今天想來玩點比較有趣的東西。

前面幾天一直在處理排版、置中、尺寸。

網頁是越來越整齊了啦。

但總覺得少了點什麼……

例如今天做了一顆按鈕。

滑鼠移過去。

……

沒反應。

再移過去。

……

還是沒反應。

不是欸！我都走到你面前了，你連個招呼都不打是不是 ==

所以今天決定來研究一下 CSS 的 hover、transition 跟 transform。

至少讓網頁不要這麼冷漠 XD

先來一顆普通的按鈕

今天先不拿方塊來玩了。

換顆按鈕！

HTML：

<button class="btn" type="button">
  點我一下！
</button>

CSS：

.btn {
  padding: 15px 30px;
  background-color: #ffb6c1;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

這樣就有一顆粉紅色的按鈕了。

嗯！

滿可愛的嘛～

但目前滑鼠移過去，除了游標變成手指之外，按鈕本身還是不會有什麼變化。

你是不是還沒睡醒？？？

Hover：看到我來了，至少變個臉吧！

這時候就可以加上：
css:

.btn:hover {
  background-color: #ff69b4;
}

:hover 是 CSS 的偽類。

當滑鼠移到按鈕上時，就會套用這段樣式。

所以現在滑鼠一過去——

欸！終於有反應了！

按鈕的背景顏色會從原本的淺粉紅色變成比較深的粉紅色。

但看著看著又覺得……

這個顏色是不是換得有點突然？

滑鼠一過去直接：

啪！！！

變色。

不是叫你打招呼，是叫你不要嚇人啦 XD

Transition：你可以溫柔一點嗎？

如果不想讓按鈕突然變色，就可以加上：
css:

.btn {
  padding: 15px 30px;
  background-color: #ffb6c1;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;

  transition: background-color 0.3s ease;
}

這裡的：
css:

transition: background-color 0.3s ease;

可以簡單拆成三個部分：

• background-color：要產生過渡效果的屬性。
• 0.3s：過渡時間為 0.3 秒。
• ease：控制變化過程的速度，開始與結束時比較緩和。

現在再把滑鼠移過去。

欸！！！

這次終於不會突然變臉了。

顏色會慢慢變化，滑鼠移開後也會慢慢恢復。

原來只是多加一行 CSS，整個感覺就差滿多的。

Transform：光變色不夠，還想偷偷長高？

既然顏色已經會變了，那今天就再貪心一點。

讓按鈕在滑鼠移過去的時候稍微放大。
css:

.btn:hover {
  background-color: #ff69b4;
  transform: scale(1.05);
}

其中：
css:

transform: scale(1.05);

代表將元素放大到原本的 1.05 倍。

這樣滑鼠一移過去，按鈕就會稍微變大。

哇～看到我來了，還知道要長高迎接我是不是 XD

如果想讓放大的過程也順一點，可以把前面的 transition 改成：
css:

transition:
  background-color 0.3s ease,
  transform 0.3s ease;

這樣顏色跟大小都會有過渡效果。

還可以讓按鈕往上跳一下！

除了放大之外，transform 也可以用來移動元素。

例如：
css:

.btn:hover {
  background-color: #ff69b4;
  transform: translateY(-5px);
}

translateY(-5px) 代表沿著 Y 軸往上移動 5px。

如果改成：
css:

transform: translateY(5px);

就會往下移動。

所以今天想讓按鈕在滑鼠移過去時，稍微往上浮起來。

欸欸欸！不用這麼激動，我只是路過啦 XD

不過 scale() 跟 translateY() 如果分開寫在同一個選擇器裡，後面的 transform 會覆蓋前面的。

如果想要同時放大又往上移動，可以寫在一起：
css:

transform: translateY(-5px) scale(1.05);

這樣兩種效果就可以一起出現了。

今天的小實作：終於會打招呼的按鈕！

最後把今天用到的東西整理在一起。

HTML：

<button class="btn" type="button">
  點我一下！
</button>

CSS：

.btn {
  padding: 15px 30px;
  background-color: #ffb6c1;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;

  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.btn:hover {
  background-color: #ff69b4;
  transform: translateY(-5px) scale(1.05);
}

現在滑鼠移過去，按鈕就會：

變色＋放大＋往上移動。

很好！

終於不是一顆毫無反應的按鈕了。

不過今天做的是滑鼠懸停效果，手機觸控操作不一定會有相同的 hover 行為。

如果是實際網站，還是要記得確認按鈕在手機上能不能正常操作。

另外，這些 CSS 只是改變按鈕的外觀。

按下去要真的執行功能，還是得再加入對應的互動程式。

這部分就留給之後的 JavaScript 再來處理 XD

今天的小心得

以前看到別人的網站，按鈕滑過去會放大、變色，甚至還會浮起來。

都會覺得：

「欸！這效果滿酷的。」

結果今天自己做一次才發現，原來不用寫很多東西，就可以做出簡單的互動效果。

今天先記住三位：

:hover → 滑鼠移過去時套用樣式。

transition → 讓樣式變化不要那麼突然。

transform → 可以移動、旋轉或縮放元素。

當然也不是每顆按鈕都要一直動。

不然整個網頁到處跳來跳去，使用者還沒按到按鈕，我就先眼花了 ==

好啦。

今天終於成功讓按鈕看到我會有反應。

Day 13，完成！

明天再看看要挑戰什麼。

希望不要一打開 JavaScript，換成我自己沒反應 XD