console
<div class="button">
<span>点击确定</span>
</div>
.button {
width: 70px;
height: 30px;
line-height: 30px;
border: 1px solid #0D96F2;
position: relative;
border-radius: 3px;
overflow: hidden;
text-align: center;
cursor: pointer;
}
.button span {
font-size: small;
color: #0D96F2;
transition: color 250ms 250ms linear;
}
.button:hover span {
color: white;
}
.button::after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
background: #0D96F2;
transform: scale(1,.1);
transform-origin: 50% 100%;
transition: transform 500ms ease-in-out;
}
.button:hover::after {
transform: scale(1,1);
}