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

在线预览    源码下载

使用方法 

HTML结构

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

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

CSS样式

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

CSS Code 复制内容到剪贴板 button {       background :  none ;       border : 0;      box-sizing:  border -box;      box-shadow:  inset  0 0 0  2px   #f45e61 ;       color :  #f45e61 ;       font-size : inherit;       font-weight : 700;       margin : 1em;       padding : 1em 2em;       text-align :  center ;       text-transform :  capitalize ;       position :  relative ;       vertical-align :  middle ;    }    button::before, button::after {      box-sizing:  border -box;       content :  '' ;       position :  absolute ;       width : 100%;       height : 100%;    }                  

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

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

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