「HTML+CSS」--自定義按鈕樣式【002】
阿新 • • 發佈:2021-03-29
# 前言
> 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)