6种非常炫酷的CSS3按钮边框动画特效

网络
说了一千句一万句壮志豪言，不行动你还是碌碌无为；如果你行动了，哪怕只是一个小小的动作，你就有可能解决了温饱大计。

这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候，按钮的边框会以不同的方式进行各种动画，效果非常的炫酷。

在线预览 源码下载

使用方法

HTML结构

该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作。各种效果非标设置不同的class。例如第一种效果的class为draw。

XML/HTML Code复制内容到剪贴板
  1. <buttonclass="draw">draw</button>

CSS样式

在CSS样式中，首先为按钮设置一些基本样式，去掉原生按钮的样式。

CSS Code复制内容到剪贴板
  1. button{
  2. background:none;
  3. border:0;
  4. box-sizing:border-box;
  5. box-shadow:inset0002px#f45e61;
  6. color:#f45e61;
  7. font-size:inherit;
  8. font-weight:700;
  9. margin:1em;
  10. padding:1em2em;
  11. text-align:center;
  12. text-transform:capitalize;
  13. position:relative;
  14. vertical-align:middle;
  15. }
  16. button::before,button::after{
  17. box-sizing:border-box;
  18. content:'';
  19. position:absolute;
  20. width:100%;
  21. height:100%;
  22. }

以上是第一种线条动画效果的制作方法。其它效果的CSS代码请参考下载文件。

本文就为大家介绍到这，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/w2bc/p/4922347.html

本文6种非常炫酷的CSS3按钮边框动画特效到此结束。那些曾经以为念念不忘的事情就在我们念念不忘的过程里，被我们遗忘了。小编再次感谢大家对我们的支持！