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
以上就是关于“ CSS3实现button:hover时background-color从左慢慢移动到右边 ” 的全部内容。