Q: 網路上找到的看起來都很厲害，程度能比嗎？
A: 厲害歸厲害，每個效果都適合你的網站嗎？

讓元素對使用者的操作有「回應」可以讓使用者有跟網頁「互動」的感覺，透過css讓元素有「微動畫」的效果，以提昇網頁的質感！上一篇有提到可以針對元素的狀態:hover、:active等偽類進行樣式的修改，搭配transition讓元素在狀態間的變化有漸進感，達到「微動畫」的效果。

本篇將繼續使用:hover、:active及transition製作多種按鈕的動態效果，看完本篇後會發現，其實不用引用套件(庫)，自己寫效果加上class就可以讓元素動起來。

/* 以下每個範例都將使用相同的基礎html及css，如下：*/
<style>
  .btn {
    position: relative;
    margin: 300px;
    width: 150px;
    line-height: 60px;
    font-size: 20px;
    color: RoyalBlue;
    text-align: center;
    background-color: Lavender;
    cursor: pointer;
    transition: .1s;
  }
</style>
  
<div class="btn">I'm a button</div>

陰影效果浮出按鈕

<style>
  .btn_float:hover {
    transform: translateY(-6px);
    box-shadow: 2px 2px 6px 2px RoyalBlue;
  }
  .btn_float:active {
    transform: translateY(-6px) scale(.98);
  }
</style>

內陰影效果按鈕

<style>
  .btn_shadowInset {
    box-shadow: inset 0 0 0 0 transparent;
  }
  .btn_shadowInset:hover {
    box-shadow: inset 0 0 6px 2px RoyalBlue;
  }
  .btn_shadowInset:active {
    box-shadow: inset 0 0 6px 4px RoyalBlue;
  }
</style>

導角變化效果按鈕

<style>
  .btn_borderRadius:hover {
    border-radius: 15px;
  }
</style>

知己知彼百戰百勝

當你開始用transition並可以透過偽元素新增變化時，就可以不受限於別人寫好的效果，做出屬於自己的風格。謎音：而且不用多寫很多程式碼呢～

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