# 前言 > Hello！小夥伴！ > 首先非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～ > 哈哈 自我介紹一下 > 暱稱：海轟 > 標籤：程式猿一隻｜C++選手｜學生 > 簡介：因C語言結識程式設計，隨後轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C++/Linux（真的真的太難了～） > 學習經驗：紮實基礎 + 多做筆記 + 多敲程式碼 + 多思考 + 學好英語！ > 日常分享：微信公眾號【海轟Pro】記錄生活、學習點滴，分享一些原始碼或者學習資料，歡迎關注～ # 效果展示  # 思路 上面效果可以概括為： - 滑鼠未停留時：青色（漸變）背景，正中文字為白色，button四角做了圓角處理 - 滑鼠停留時：淺青色背景從上至下，依次覆蓋button - 滑鼠離開button時：淺青色背景從上至下，依次消失，button逐漸恢復原樣 根據效果圖可以得出實現的一些思路： - 初始狀態，設定button背景為漸變青色，中間文字為白色，做圓角、陰影處理 - 初看有兩個過渡效果，其實是可以用一個元素的過渡transition實現的 - 這裡我們就利用button的::before偽類元素來實現 - 將::before設定為絕對定位，初始位置為左下角（右下也是可以的），其中width設定為100%，height為0 - 觸發hover時，height設定為100%，top設定為0 **（記住這裡的關鍵點top:0）** - 還有就是，button和::before的背景顏色需要有所深淺變化 這裡使用的漸變色： - 深青（漸變）：linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%); - 淺青（漸變）：linear-gradient(315deg, #4dccc6 0%, #96e4df 74%); # Demo程式碼 HTML ```html Haihong Pro ``` CSS ```css html,body{ margin: 0; height: 100%; } body{ display: flex; justify-content: center; align-items: center; } .btn{ width: 390px; height: 120px; background:linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%); border: none; border-radius: 10px; font-family: 'Lato', sans-serif; font-weight: 500; font-size: 48px; color: #fff; box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); outline: none; position: relative; z-index: 0; } .btn::before{ position:absolute; content: ''; left: 0; bottom:0; width: 100%; height: 0; transition: all 0.3s ease; border-radius: 10px; background: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%); z-index: -1; } .btn:hover::before{ top: 0; height: 100%; } .btn:active{ top: 2px; } ``` # 疑點詳解 **1.為什麼觸發hover時，除了設定height:100%外，還需要設定top:0呢？上面效果圖原理是怎樣呢？** 為了便於觀察，我們將::before的初始狀態顯示出來   初始時，before的位置是在左下角（bottom:0 left:0） 觸發hover時，如果只是設定heigth:100%，產生的效果如下：  如果此時立即將位置改為左上角（top:0 left:0），就會產生從上至下的效果：  所以還需要在觸發hover時，新增 top:0 ( left就不需要變了，因為原本設定好了 ) **2.為什麼最後需要設定:active呢？** ```css .btn:active{ top: 2px; } ``` emmm，就是產生一個點選按鈕的動態效果（**點選一下，動一下**），具體可以檢視css :active的作用，這裡就不多說了。 # 踩坑 **1.button、button::before需要設定z-index，分別為0和-1（確定button在上面一層就行）** 不然，會產生如下效果：  **2.button中記得設定 outline: none;** 不然，點選button後，會出現藍色邊框 注：前兩次文章中海轟也沒有發現這個問題，今天寫的的時候，點選後才發現了這個問題  # 結語 學習來源： > https://codepen.io/yuhomyan/pen/OJMejWJ css只會一點點，學習之餘從喜歡看一些大神級別的css效果展示，根據原始碼一點一點學習知識點，文中有不對的地方，歡迎指出～ ![](https://img2020.cnblogs.com/blog/2264200/202103/2264200-20210330223351511-12872715