标签：
这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候，按钮的边框会以不同的方式进行各种动画，效果非常的炫酷。
该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作。各种效果非标设置不同的class。例如第一种效果的class为draw。
<button class="draw">draw</button>
在CSS样式中，首先为按钮设置一些基本样式，去掉原生按钮的样式。
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
