Q: 為什麼別人的按鈕點起來比較有感覺？
A: 因為外國的月亮比較圓？

網頁中常常會有很多可以點擊的地方（按鈕或是超連結），有些網站的按鈕讓人覺得「只是按鈕」，而有些網站的按鈕按起來時會讓人有「回應」，會有這樣的差別是因為按鈕有在跟滑鼠「互動」。

普通的按鈕

這是一顆常見的、普通的按鈕，不論滑鼠對這顆按鈕做了什麼它都無動於衷。

<style>
  .btn {
    width: 180px;
    line-height: 40px;
    font-size: 20px;
    color: PapayaWhip;
    text-align: center;
    background-color: Chocolate;
    border: 5px solid SaddleBrown;
    border-radius: 15px;
    cursor: pointer;
  }
</style>
  
<div class="btn">確  認</div>

點起來有感覺的按鈕

要讓鼠標跟元素有「互動」要善用:hover、:active等偽類，以下述例子來說，當:hover時將元素放大至1.05倍，當點擊元素時則讓元素還原至原本的大小且有內陰影。針對不同的狀態給予不同的樣式，這樣當滑鼠在跟元素「互動」時，元素會反饋不同的「回應」。謎音：按起來是不是比較不一樣？

<style>
  .btn:hover {
    /* :hover 代表滑鼠移到元素上時的狀態 */ 
    transform: scale(1.05);
  }

  .btn:active {
    /* :active是滑鼠點擊元素的狀態 */
    transform: scale(1);
    box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .2);
  }
</style>

點起來更有感覺的按鈕（？）

上面的按鈕已經可以跟滑鼠「互動」了，只是元素在變化的過程看起來有點生硬，這時候就要用transition。transition這個屬性操控元素的漸變，最快的下法就是對transition直接下秒數就可以了，這樣元素在變化的時候就會以0.1秒的速度由原本的狀態切換到後來的狀態，以範例的:hover來說，就會以0.1秒的速度由1倍放大至1.05倍。

<style>
  .btn {
    transition: .1s;
  }
</style>

所以為什麼別人的按鈕點起來跟自己做的不一樣？

要讓網頁動起來、製作微動畫的第一要點就是要讓使用者跟畫面「互動」，當使用者對元素進行操作時，畫面讓使用者有「被回應」的感覺是很重要的！善用偽類，在元素不同的狀態給予不同的樣式，並讓樣式變化時是漸進的、不那麼生硬，這麼一來畫面看起來就有質感多啦～

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！