css3 - 按钮元素动画效果_css3鼠标滑过按钮动画文字也跟着变-优快云博客

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/71402701

本文介绍了一种CSS3实现的按钮动画效果，当鼠标悬停时，按钮文字从右侧移向左侧，背景颜色变化，同时按钮内的图标向右移动至特定位置，为交互增加动态体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当鼠标指针滑过按钮时，按钮左侧内边距减小，使文字从右侧移动到左侧，并将背景颜色更改。同时，也为鼠标指针滑过状态下的i图标设置了新的属性状态，使得图标向右移动，停止在与右侧的距离等于整体宽度的5%的位置。如图：

按钮原始状态鼠标悬停状态

引入图标文件：

<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">

html:

<button>
    <a href="#"><i class="fa fa-chevron-right"></i>按钮</a>
</button>

css：

button {
   padding: 20px;
   background-color: #FF6F69;
 }
 a {
   color: #FFEEAD;
   text-decoration: none;
   font-size: 26px;
   display: inline-block;
   box-sizing: border-box;/*添加padding时，总宽不会改变*/
   width: 180px;
   height: 40px;
   line-height: 40px;
   padding-left: 80px;
   background-color: #FF6F69;
   border: 1px solid #FFEEAD;
   border-radius: 10px;
   position: relative;

   -webkit-transition: all .5s linear;/*鼠标滑过链接时，过渡动画*/
   transition: all .5s linear;
 }
 i {
   position: absolute;/*给箭头图标定位（子绝父相）*/
   top: 20%;
   right: 80%;

   -webkit-transition: all .5s;/*设置i图标动画*/
   transition: all .5s;
 }
 a:hover { /*鼠标放上， a需要动画的属性*/
   color: #FF6F69;
   background-color: #FFEEAD;
   padding-left: 0%;
 }
 a:hover i { /*鼠标放上，i的动画属性*/
   right: 5%;
 }