✖  
登陆

还没有账号? 立即注册

忘记密码?
登陆
✖  
注册

已经有账号?马上登陆 购买邀请码

立即注册

CSS3-Hover按钮边框动画特效

首页 建站技术 正文
广告

纯CSS3 Hover按钮边框动画特效,还是比较美观的,对于来展示网站的细节是非常不错的,稍微改改适合自己网站主题的颜色就能使用了。

适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器

  1. button{
  2. background:#1AAB8A;
  3. color:#fff;
  4. border:none;
  5. position:relative;
  6. height:60px;
  7. font-size:1.6em;
  8. padding:0 2em;
  9. cursor:pointer;
  10. transition:800ms ease all;
  11. outline:none;
  12. }
  13. button:hover{
  14. background:#fff;
  15. color:#1AAB8A;
  16. }
  17. button:before,button:after{
  18. content:'';
  19. position:absolute;
  20. top:0;
  21. right:0;
  22. height:2px;
  23. width:0;
  24. background: #1AAB8A;
  25. transition:400ms ease all;
  26. }
  27. button:after{
  28. right:inherit;
  29. top:inherit;
  30. left:0;
  31. bottom:0;
  32. }
  33. button:hover:before,button:hover:after{
  34. width:100%;
  35. transition:800ms ease all;
  36. }

image.png

image.png

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:本站资源来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系客服并出示版权证明以便删除!
EMLOG插件-图片自动添加ALT描述插件
« 上一篇 06-06
价值3980元SEO网站排名优化实战高级指南/共11节视频课程
下一篇 » 06-06

发表评论

  • 泡泡
  • 阿呆
  • 阿鲁
  • 蛆音娘
没有更多评论了
扫一扫,支付10
支付完成后,请等待5秒左右。手机请点此支付!