CSS3实现button:hover时background-color从左慢慢移动到右边CSS3实现button:hover时背景色从左向右慢慢移动(慢动画)

66 阅读 0 评论 44 点赞

我是靠谱客的博主唠叨白昼，最近开发中收集的这篇文章主要介绍CSS3实现button:hover时background-color从左慢慢移动到右边CSS3实现button:hover时背景色从左向右慢慢移动(慢动画)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

CSS3实现button:hover时背景色从左向右慢慢移动(慢动画)

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.btn{
position: relative;
width: auto;
min-width: 120px;
padding: 10px;
text-align: center;
color: #fff;
background: #00d463;
cursor: pointer;
border-radius: 4px;
border: none;
}
.btn:after,.btn:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
background: #00d463;
z-index:-2;
border-radius: 4px;
}
.btn:hover{
z-index:1;
background:transparent;
}
.btn:before {
transition: .3s;
background: #14ae5c;
z-index:-1;
}
.btn:hover:after,.btn:hover:before {
width: 100%;
}
</style>
</head>
<body>
<button class="btn">Try Free</button>
</body>
</html>

免责说明：（上述代码版权声明）
版权声明：本文为CSDN博主「向着光芒的女孩之littleAnn」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ann295258232/article/details/90059607