使用CSS3实现按钮特效

最近在慕课网上看到了一个按钮特效，觉得挺好看的，记录一下。

简单分析一下就是鼠标移入的时候有四条线分别从四个方向移入，横向的两条线宽度和位置发生变化，纵向的两条线高度和位置发生变化。

HTML代码

<a href="#" class="button">
      <span class="line line-top"></span>
      <span class="line line-right"></span>
      <span class="line line-bottom"></span>
      <span class="line line-left"></span>
       GET STARTED
 </a>

定位问题

a元素作为父元素，定位为relative，让span元素相对于它定位，span元素定位为absolute。a元素是内联元素，我需要给它设置宽和高，所以需要改变它的display属性。然后给span元素加上过渡属性。

a{
      display: inline-block;
      width: 300px;
      height: 80px;
      line-height: 80px;