漸層色按鈕 Hover 效果

本篇同步發表於：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