主要知識(shí)點(diǎn):
transition
box-shadow
利用時(shí)間差完成描邊的過程,樣式可能有點(diǎn)丑，shadow不是重點(diǎn)…主要是學(xué)習(xí)用法
效果圖片
btn.png
html文件
<div class="a-box">
<a href="">button</a>
</div>
css文件
.a-box{
text-align:center;
}
a{
display: inline-block;
margin: 10px 0;
padding: 25px 50px;
font-size: 20px;
line-height: 0;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
font-weight: 700;
transition: box-shadow ease-in 1s;
box-shadow: 0 3px 3px -3px #ccc,0 2px 2px -2px rgba(255,255,255,.6),0 1px 1px -1px rgba(255,255,255,.8);
overflow: hidden;
position: relative;
cursor: pointer;
}
a:before, a:after{
box-sizing: border-box;
border: 1px solid transparent;
width: 0;
height: 0;
content: '';
display: block;
position: absolute;
}
a:after{
bottom: 0;
left: 0;
-webkit-transition: border-color 0s ease-in .8s,height .2s ease-in .6s,width .2s ease-in .4s;
transition: border-color 0s ease-in .8s,height .2s ease-in .6s,width .2s ease-in .4s;
}
a:before{
top: 0;
right: 0;
-webkit-transition: border-color 0s ease-in .4s,height .2s ease-in .2s,width .2s ease-in;
transition: border-color 0s ease-in .4s,height .2s ease-in .2s,width .2s ease-in;
}
a:hover{
color: #638aba;
box-shadow: 0 3px 3px #ccc,0 2px 2px rgba(255,255,255,.6),0 1px 1px rgba(255,255,255,.8);
}
a:hover:after{
width: 100%;
height: 100%;
border-top-color: #638aba;
border-left-color: #638aba;
-webkit-transition: height .3s ease-out,width .3s ease-out .3s;
transition: height .3s ease-out,width .3s ease-out .3s;
}
a:hover:before{
width: 100%;
height: 100%;
border-bottom-color: #638aba;
border-right-color: #638aba;
-webkit-transition: border-color 0s ease-out .6s,height .3s ease-out .6s,width .3s ease-out .9s;
transition: border-color 0s ease-out .6s,height .3s ease-out .6s,width .3s ease-out .9s;
}
