纯CSS3代码Hover按钮边框动画特效来讲,这段css代码还是比较美观的,对于来展示五行资源博客网站的细节是非常不错的,稍微改改适合自己网站fee主题的颜色就能使用了。
适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。
实现css
button{
background:#1AAB8A;
color:#fff;
border:none;
position:relative;
height:60px;
font-size:1.6em;
padding:0 2em;
cursor:pointer;
transition:800ms ease all;
outline:none;
}
button:hover{
background:#fff;
color:#1AAB8A;
}
button:before,button:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background: #1AAB8A;
transition:400ms ease all;
}
button:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
button:hover:before,button:hover:after{
width:100%;
transition:800ms ease all;
}
滴!学生卡!请上车的乘客系好安全带~