1. 程式人生 > >「HTML+CSS」--自定義按鈕樣式【002】

「HTML+CSS」--自定義按鈕樣式【002】

# 前言 > Hello!小夥伴! > 首先非常感謝您閱讀海轟的文章,倘若文中有錯誤的地方,歡迎您指出~ > 哈哈 自我介紹一下 > 暱稱:海轟 > 標籤:程式猿一隻|C++選手|學生 > 簡介:因C語言結識程式設計,隨後轉入計算機專業,有幸拿過國獎、省獎等,已保研。目前正在學習C++/Linux(真的真的太難了~) > 學習經驗:紮實基礎 + 多做筆記 + 多敲程式碼 + 多思考 + 學好英語! > 日常分享:微信公眾號【海轟Pro】記錄生活、學習點滴,分享一些原始碼或者學習資料,歡迎關注~ # 效果展示 ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210329183023171.gif#pic_center) # 思路 上面效果可以概括為: - 滑鼠未停留時:紅藍(漸變)背景,正中文字為白色,button四角做了圓角處理 - 滑鼠停留時:button背景變成白色,文字變為藍色,邊框四條直線產生匯聚效果,同時每條直線會有一個陰影的產生。 根據效果圖可以得出實現的一些思路: - 背景、文字的顏色變化使用hover就可以實現 - 左/右兩邊的兩條線可以使用button的::before/::after偽類,結合transition,當滑鼠停留時,實現兩條線的延展 - 中間的文字使用span標籤,需要使用span標籤的偽類 - 上下兩條線利用span的偽類::before/::after實現,原理類似左右兩邊的直線 其實與上一篇文章實現的原理是一樣的,只是線條的位置和方向有所變化,其他基本沒有什麼變化[「HTML+CSS」--自定義按鈕樣式【001】](https://www.cnblogs.com/haihongpro/p/14588474.html) # Demo程式碼 HTML ```html Document
``` CSS ```css html,body{ margin: 0; height: 100%; } body{ display: flex; justify-content: center; align-items: center; } .btn{ width: 390px; height: 120px; background: radial-gradient(circle, rgba(247, 150, 192, 1) 0%, rgba(118, 174, 241, 1) 100%); border: none; color: #fff; font-family: 'Lato', sans-serif; font-weight: 500; font-size: 48px; border-radius: 10px; cursor: pointer; position: relative; line-height: 120px; } .btn span{ width: 100%; height: 100%; position: relative; display: block; } .btn:hover{ background: transparent; color: #76aef1; } .btn::before, .btn::after{ content: ''; position: absolute; width: 1px; height: 1px; box-shadow: -1px -1px 20px 0px rgba(255, 255, 255, 1), -4px -4px 5px 0px rgba(255, 255, 255, 1), 10px 10px 20px 0px rgba(0, 0, 0, .4), 6px 6px 5px 0px rgba(0, 0, 0, .3); transition: all 0.8s ease; padding: 0; } .btn::before{ top: 0; right: 0; } .btn::after{ bottom: 0; left: 0; } .btn:hover::before, .btn:hover::after{ height: 100%; } .btn span::before, .btn span::after{ position:absolute; content: ''; height: 1px; width: 0px; box-shadow: -1px -1px 20px 0px rgba(255, 255, 255, 1), -4px -4px 5px 0px rgba(255, 255, 255, 1), 10px 10px 20px 0px rgba(0, 0, 0, .4), 6px 6px 5px 0px rgba(0, 0, 0, .3); transition: all 0.8s ease; } .btn span::before{ top:0; left: 0; } .btn span::after{ bottom: 0; right: 0; } .btn span:hover::before, .btn span:hover::after{ width: 100%; } ``` # 疑點詳解 **1.怎麼實現下圖中的效果呢?** ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210329183611921.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIyNTE4Mg==,size_16,color_FFFFFF,t_70) 其實這個利用boder-shadow就可以實現了,對每一條直線都新增一下陰影效果就可以了 ```css box-shadow: -1px -1px 20px 0px rgba(255, 255, 255, 1), -4px -4px 5px 0px rgba(255, 255, 255, 1), 10px 10px 20px 0px rgba(0, 0, 0, .4), 6px 6px 5px 0px rgba(0, 0, 0, .3); ``` **2.偽類元素的位置** 與上一篇文章的區別在於,這裡button的兩個偽類::before和::after的位置有所變化,分別位於**左下和右上** 初始width都為1px,height為0 注:這裡為了演示,將width/heigth都設定為了10px,背景色為紅色,便於觀察 ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210329183923950.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIyNTE4Mg==,size_16,color_FFFFFF,t_70) 然後滑鼠停留時,利用過渡transition,將height設定為100%,就可以實現左右兩條線的效果了 ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210329184253122.gif#pic_center) 上下兩條直線就是利用span的兩個偽元素實現的,原理也是一樣的,這裡就不再贅述了。 # 踩坑 1.忘了將span的**position設定為relative** 2.沒有記得將**display設定為block** 因為span不是塊級元素,這裡需要的是塊級元素,如果沒有宣告為塊級元素,就會出現下面的結果: ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210329184927523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIyNTE4Mg==,size_16,color_FFFFFF,t_70) 注:這裡使用了紅色背景,以便觀察 # 結語 學習來源: >
https://codepen.io/yuhomyan/pen/OJMejWJ css只會一點點,學習之餘從喜歡看一些大神級別的css效果展示,根據原始碼一點一點學習知識點,文中有不對的地方,歡迎指出~ ![](https://img2020.cnblogs.com/blog/2264200/202103/2264200-20210329190654027-108273402.png)