漸層色按鈕hover效果

漸層色按鈕hover效果

本篇要解決的問題

如果有寫過按鈕hover效果的設計師或前端就知道,背景色的hover效果,不論是從無漸層到有漸層,或一個漸層到另一個漸層,是吃不到transiton(過渡)的,會看到顏色很生硬的從一個顏色直接跳到另一個顏色,少了一種慢慢來的美感。

如果是要解決一個漸層到另一個漸層的方法,大部份是改變background-position,藉由改變它的顏色位置來到達transition的效果。

像是這個demo頁的選單:https://letswritetw.github.io/trello-json-sample/

但如果漸層色改變的幅度很大呢?

或是想從非漸層轉到漸層呢?

今天在看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,歡迎取用:

See the Pen gradient hover effect by sean (@sean-su) on CodePen.


Summary
漸層色按鈕hover效果
Article Name
漸層色按鈕hover效果
Description
本篇大綱:本篇要解決的問題、寫code前的原理思考、實作程式碼部份。今天在看Google AMP的文件時,看見他們頁面上的按鈕,就是非漸色轉到漸層色,並且還能帶有transition的過渡。看了一下他們的寫法,發現原理很簡單,就寫了一個在CodePen上,方便以後取用。
Augustus
Let's Write
Let's Write
Publisher Logo
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言