前言
Hello！小伙伴！ 首先非常感謝您閱讀海轟的文章，倘若文中有錯誤的地方，歡迎您指出～ 哈哈 自我介紹一下 昵稱：海轟 標簽：程序猿一只｜C選手｜學生 簡介：因C語言結識編程，隨后轉入計算機專業，有幸拿過國獎、省獎等，已保研。目前正在學習C/Linux（真的真的太難了～） 學習經驗：扎實基礎 + 多做筆記 + 多敲代碼 + 多思考 + 學好英語！ 日常分享：微信公眾號【海轟Pro】記錄生活、學習點滴，分享一些源代碼或者學習資料，歡迎關注～
效果展示
思路
上面效果可以概括為：
- 鼠標未停留時：藍色（漸變）背景，正中文字為白色，button四角做了圓角處理
- 鼠標停留時：button背景變成白色，文字變為藍色，同時右上方、左下角同時延伸兩條互相垂直的線條
根據效果圖可以得出實現的一些思路：
- 背景、文字的顏色變化使用hover就可以實現
- 右上角的兩條線可以使用button的::before/::after偽類，結合transition，當鼠標停留時，實現兩條線的延展
- 中間的文字使用span標簽，需要使用span標簽的偽類
- 左下角的兩條線利用span的偽類::before/::after實現，原理類似右上角
Demo代碼
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<button class="btn"><span>Haihong Pro</span></button>
</body>
</html>
CSS
html,body{
margin: 0;
height: 100%;
}
body{
display: flex;
justify-content: center;
align-items: center;
}
.btn{
width: 390px;
height: 120px;
color: #fff;
background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
font-family: 'Lato', sans-serif;
font-weight: 500;
border-radius: 10px;
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);
transition: all 0.3s ease;
cursor: pointer;
border: none;
position: relative;
line-height: 120px;
padding: 0;
}
.btn span{
position: relative;
display: block;
width: 100%;
height: 100%;
font-size: 48px;
}
.btn::before,.btn::after{
position:absolute;
content: '';
top: 0;
right: 0;
background: rgba(2, 126, 251, 1);
transition: all 0.3s ease;
}
.btn::before{
width: 0;
height: 2px;
}
.btn::after{
height: 0;
width: 2px;
}
.btn span::before,
.btn span::after{
position:absolute;
content: '';
bottom: 0;
left: 0;
background: rgba(2, 126, 251, 1);
transition: all 0.3s ease;
}
.btn span::before{
width: 0;
height: 2px;
}
.btn span::after{
height: 0;
width: 2px;
}
.btn:hover{
background: transparent;
color: rgba(2, 126, 251, 1);
}
.btn:hover::before{
width: 100%;
}
.btn:hover::after{
height: 100%;
}
.btn span:hover::before{
width: 100%;
}
.btn span:hover::after{
height: 100%;
}
疑點詳解
怎么實現兩條線的延展的呢？
首先，使用before和after偽類，在button的前后添加兩個偽元素 一個width=0，height=2px；另一個height=0，width=2px 
這里便於理解和觀察，我們將這兩個元素顯示出來
修改css代碼：將before改為紅色，便於觀察，同時width、height都改為20px
.btn::before,.btn::after{
position:absolute;
content: '';
top: 0;
right: 0;
background: red;
transition: all 0.3s ease;
}
.btn::before{
width: 20px;
height: 20px;
}
現在就可以觀察到before的具體位置了 
利用CSS 中的 transition 屬性，在鼠標停留（hover）在其上時，將其寬度修改為100%， 就可以實現延展效果了
// 鼠標停留在上方時，寬度變成100%
.btn:hover::before{
width: 100%;
}
不了解css transition的小伙伴可以查看：
transition簡介：https://www.w3school.com.cn/cssref/pr_transition.asp
一個before實現寬度的延伸，另一個after就實現高度的延伸，所以一個元素的兩個偽元素就可以實現兩條線的延展效果
同樣，左下角的延展就是利用span的before和after偽元素了
踩坑
1.父元素button沒有設置padding=0，會出現四條線沒有完美閉合的情況 
2. button元素中應該設置position: relative，如果沒有會出現： 
原因：因為button的before和after偽元素中的 position:absolute; 所以必須設置button position: relative，
position中absolute是指：生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
如果不聲明button的position為relative，那么此時button::before/after就會認為它的父元素是瀏覽器，那么絕對定位也就是根據瀏覽器而定了。
注釋版代碼
html,body{
margin: 0;
height: 100%;
}
body{
/* 元素居於正中 */
display: flex;
justify-content: center;
align-items: center;
}
.btn{
width: 390px;
height: 120px;
/* 文字顏色為白色 */
color: #fff;
/* button背景色為漸變藍色 */
background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
/* 字體設置 */
font-family: 'Lato', sans-serif;
font-weight: 500;
/* 圓角處理 */
border-radius: 10px;
/* button陰影設置 */
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);
/* 設置過渡屬性 所以元素過渡 持續時間：0.3s 速度曲線類型：ease*/
transition: all 0.3s ease;
/* 鼠標停留時，變為小手 */
cursor: pointer;
border: none;
position: relative;
/* 行高 */
line-height: 120px;
padding: 0;
}
.btn span{
/* 相對定位 */
position: relative;
/* 塊級元素 */
display: block;
width: 100%;
height: 100%;
font-size: 48px;
}
.btn::before,.btn::after{
/* 絕對定位 */
position:absolute;
/* content必須有 不然不顯示 */
content: '';
/* 定位右上角 */
top: 0;
right: 0;
/* 背景色：藍色 */
background: rgba(2, 126, 251, 1);
transition: all 0.3s ease;
}
.btn::before{
/* 初始化 */
width: 0;
height: 2px;
}
.btn::after{
height: 0;
width: 2px;
}
.btn span::before,
.btn span::after{
/* 絕對定位 */
position:absolute;
content: '';
/* 定位左下角 */
bottom: 0;
left: 0;
background: rgba(2, 126, 251, 1);
transition: all 0.3s ease;
}
.btn span::before{
width: 0;
height: 2px;
}
.btn span::after{
height: 0;
width: 2px;
}
.btn:hover{
/* 背景透明 */
background: transparent;
/* 字體色變為：藍色 */
color: rgba(2, 126, 251, 1);
}
.btn:hover::before{
/* 寬度過渡為100% */
width: 100%;
}
.btn:hover::after{
/* 高度過渡為100% */
height: 100%;
}
.btn span:hover::before{
width: 100%;
}
.btn span:hover::after{
height: 100%;
}
結語
學習來源：
css只會一點點，學習之余從喜歡看一些大神級別的css效果展示，根據源碼一點一點學習知識點，文中有不對的地方，歡迎指出～
