使用CSS3实现按钮特效

最新推荐文章于 2025-09-21 09:45:54 发布

原创

最新推荐文章于 2025-09-21 09:45:54 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #按钮特效

本文记录了一个使用CSS3实现的按钮特效，当鼠标移入时，四条线从四个方向动态进入，线条的宽度、高度及位置发生变化。通过分析HTML结构和CSS动画，详细介绍了如何创建这一效果，包括定位、过渡属性的使用，以及解决线条与边框重合的问题。

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

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

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;
      color: #fff

最低0.47元/天解锁文章