https://jsbin.com/xeluqil/2/edit?css,output
<a href="#" class="btn-hover">
现在购买
<span></span>
<span></span>
<span></span>
<span></span>
</a>
.btn-hover {
display: inline-block;
box-sizing: border-box;
width: 120px;
height: 50px;
background: #ddd;
line-height: 50px;
text-align: center;
text-decoration: none;
color: #aaa;
transition: all .5s ease;
position: relative;
}
.btn-hover:before {
content: " ";
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 2px solid #ccc;
left: 0;
top: 0;
}
.btn-hover:hover {
color: #06f;
}
.btn-hover > span {
position: absolute;
background: #06f;
transition: all .3s linear;
}
.btn-hover:hover > span:nth-child(1),
.btn-hover:hover > span:nth-child(3) {
width: 100%;
}
.btn-hover:hover > span:nth-child(2),
.btn-hover:hover > span:nth-child(4) {
height: 100%;
}
.btn-hover > span:nth-child(1) {
top: 0;
left: 0;
width: 0%;
height: 2px;
transition-delay: .9s;
}
.btn-hover > span:nth-child(2) {
top: 0;
right: 0;
width: 2px;
height: 0%;
transition-delay: .6s;
}
.btn-hover > span:nth-child(3) {
bottom: 0;
right: 0;
width: 0%;
height: 2px;
transition-delay: .3s;
}
.btn-hover > span:nth-child(4) {
bottom: 0;
left: 0;
width: 2px;
height: 0%;
transition-delay: 0s;
}
.btn-hover:hover > span:nth-child(1) { transition-delay: 0s; }
.btn-hover:hover > span:nth-child(2) { transition-delay: .3s; }
.btn-hover:hover > span:nth-child(3) { transition-delay: .6s; }
.btn-hover:hover > span:nth-child(4) { transition-delay: .9s; }
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…