本篇同步發表於：Let’s Write - 漸層色按鈕 Hover 效果
本篇大綱：
前言：本篇要解決的問題
寫 Code 前的原理思考
實作程式碼部份
本篇要解決的問題
如果有寫過按鈕 Hover 效果的設計師或前端就知道，背景色的 Hover 效果，不論是從無漸層到有漸層，或一個漸層到另一個漸層，是吃不到 transiton（過渡）的，會看到顏色很生硬的從一個顏色直接跳到另一個顏色，少了一種慢慢來的美感。
如果是要解決一個漸層到另一個漸層的方法，大部份是改變 background-position，藉由改變它的顏色位置來到達 transition 的效果。
但如果漸層色改變的幅度很大呢？
或是想從非漸層轉到漸層呢？
今天在看 Google AMP 的文件時，看見他們頁面上的按鈕，就是非漸色轉到漸層色，並且還能帶有 transition 的過渡。
看了一下他們的寫法，發現原理很簡單，就寫了一個在 CodePen 上，方便以後取用。
寫 Code 前的原理思考
原理是這樣的：
1 寫一個按鈕，並設定背景色、transition。
2 針對這個按鈕的 class 寫一個 ::before 或 ::after，寬高跟按鈕相同，背景色寫 Hover 後要的漸層色。
3 按鈕 :hover 時，按鈕本身的背景色改成透明，這樣就看得到 ::before、::after 的背景色了。
實作程式碼部份
以上是原理講解，以下就開始講到 Code 的部份了。
比較需要講的是第 2 步。
首先，::before 或 ::after 的寬高要跟按鈕相同，有一個簡單好用的作法，如下：
將按鈕本身設為定位的參考點，它的 ::before 或 ::after 就用 absolute，並在上右下左都設為 0，這樣就會跟按鈕本身同寬高了。
z-index: -1 是為了讓 ::before 或 ::after 的顏色不壓過按鈕上的字。
另外要注意的是，如果整個頁面有上背景色，那按鈕 ::before 或 ::after 的 z-index: -1 會造成按鈕
Hover 後的顏色被蓋過。
解決方式是最外圍的那層（CodePen 的範例用 .container）寫下：
這樣就行了。
以下是自己寫的demo，歡迎取用：https://codepen.io/letswrite/pen/XxWgWd