利用 CSS 做出簡單的按鈕 hover 動畫回饋

文章目的

因為最近在練習製作電商網站，學到了一個不錯的按鈕 hover 回饋小技巧，想藉此篇文章做個紀錄。

使用技巧與介紹

transform

這是一個 css 屬性可以讓使用此屬性的元素，達到被平移、旋轉、縮放和傾斜等操作，那這次我們主要用到的是 translate 這個平移屬性。
translate 的特性是可以根據我們設定的值，以元素中心點為基準平移。

transition

transition 也是一個 css 屬性，我們可以操作此屬性，來決定元素顯示的快慢與時間。

css 偽元素

偽元素是個很方便的技巧，在小地方會發揮想不到的效果，基本上偽元素會根據我們的主要元素來顯示，最常看到的就是 before 與 after，分別代表在主元素之前或是之後顯示的元素。

本次效果說明

我們要讓按鈕在 hover 時，頭上會有由中心點展開的線條，如下圖所示
觸發前

觸發後

CSS 撰寫

這邊我先貼上完成的程式碼，在做一一解釋：

.mainNavbarBtn{
       position: relative;
       color: rgba($color: white, $alpha: 0.8);
       &::before{
           position: absolute;
           content: '';
           top: 0;
           left: 50%;
           height: 3px;
           background: white;
           width: 0%;
           transform: translateX(-50%);
           transition: all .3s
       }
       &:hover{
           color: rgba($color: white, $alpha: 1.0);
           &::before{
           position: absolute;
           content: '';
           top: 0;
           left: 50%;
           height: 3px;
           background: white;
           width: 100%;
           transform: translateX(-50%);
           transition: all .3s
       }
           text-decoration: none;
       }
   }

偽元素設置：這邊我們先為主元素設定一個 position: relative 來方便定位我們的偽元素，那因為是在上頭顯示因此用 before 或 after 就顯得沒那麼重要，若是左右顯示 before、after 就會有差別，再來是**偽元素的重點屬性 content**，content 會決定我們偽元素的內容，那因為我們只需要線條，所以可以不用填入內容，但 content 這屬性還是必須寫入。
transform 應用：因為我們的目的是要讓線條可以從中心點向兩側發散顯示，預設顯示會是從左邊頭顯示到右邊尾。
因此我們需要利用到絕對定位與 transform 來達到效果。
我們先用絕對定位將線條位移主元素的 50% 寬度，這時線條的頭會在主元素寬度中間的位置，這時線條顯示時的確會從中心出發，但又會有個問題，線條出發到結束一樣從左到右，且因為我們起始位置改變導致線條長度超出我們的主元素寬度。
這時我們就需要用到 transform 來修正我們線條位置，我們設定 transform 往 x 軸的負方向偏移 50% 將多出的部分轉移回來，這樣視覺上我們就會以為是從中間向兩側發散。
transition 效果：最後我們只需要加入 transition 設定我們線條的顯示時間，就會有漸變的效果出現囉!!

參考資料

卡斯伯老師偽元素介紹
 transform各效果應用