<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.mybtn{
display: inline-block;
padding: 5px 8px;
border: .5px solid #e8e8e8;
border-radius: 5px;
color: #3a3a3a;
position: relative;
overflow: hidden;
}
.mybtn::after{
content: "";
position: absolute;
100%;
height: 100%;
bottom: 100%;
left: 0;
opacity: .8;
transition: all .5s ease-out .1s;
}
.mybtn:before{
content: "";
position: absolute;
100%;
height: 50%;
top: 100%;
left: 0;
opacity: .8;
transition: all .5s ease-out .1s;
}
.mybtn:hover{
border: .5px solid #e9e9e9;
background-color: #e1e1e1;
cursor: pointer;
}
.mybtn:hover::before{
background-color: #4b6eb1;
top: 50%;
}
.mybtn:hover::after{
background-color: #4b6eb1;
bottom: 50%;
}
.mybtn:active{
border: .5px solid #d4d4d4;
background-color: #cbcbcb;
}
</style>
</head>
<body>
<div class="mybtn">按钮效果</div>
</body>
</html>