纯CSS3 Hover按钮边框动画特效,还是比较美观的,对于来展示网站的细节是非常不错的,稍微改改适合自己网站主题的颜色就能使用了。
适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器
- 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;
- }
版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。版权声明:本站资源来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系客服并出示版权证明以便删除!
发表评论