代码 text-align center 在 btn span 里面
css
body{
min-height: 100vh;
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
/* button */
.btn {
width: 100px;
height: 20px;
border: none;
position: relative;
background-color: aqua;
}
.btn::after, .btn::before, .btn span::after, .btn span::before {
transition: all 0.3s ease;
}
.btn span{
width: 100%;
height: 100%;
display: block;
text-align: center;
/* position: relative; */
}
.btn::after, .btn::before {
content: "";
/* bottom: 0; */
/* 修改这个就能影响生长方向 */
position: absolute;
top: 0;
right: 0;
background-color: white;
z-index: 2;
}
.btn span::after, .btn span::before {
content: "";
position: absolute;
/* top: 0; */
/* 修改这个就能影响生长方向 */
bottom: 0;
left: 0;
background-color: white;
z-index: 2;
}
.btn::after, .btn span::after {
width: 0%;
height: 2px;
}
.btn::before, .btn span::before{
width: 2px;
height: 0%;
}
.btn:hover::before, .btn span:hover::before{
height: 100%;
}
.btn:hover::after, .btn span:hover::after{
width: 100%;
}
html
Document
Ori
