漸層色按鈕 Hover 效果

/

本篇要解決的問題

如果有寫過按鈕 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::afterz-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
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Vue

用 Storybook 做一個 UI 整理集

Front-End

用 CSS :target 製作頁籤、手風琴功能

WordPress

WordPress:Site Kit by Google 介紹及使用

Front-End

mailto: 點擊連結 開啟寄送 email

Firebase Google

Firebase Performance 使用筆記

Analytics Google

GA 自訂維度的應用 分類之下的文章成效

WordPress

WordPress SEO 有幫助的 3 + 4 個外掛

API Front-End

WebSocket 基本介紹及使用筆記

Front-End

用純 CSS 寫的網頁預覽效果

Google Others

Youtube Iframe API 常用功能

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言