首发于勤劳的web小园丁

切换模式

【技术】通过css实现按钮hover时背景色从左慢慢移动到右边

向着光芒的平安

按钮鼠标移动上去时，新背景色从左到右滑过去

思路：

1.正常情况下：

通过伪类before和after,让按钮多两层的技巧容器大小跟按钮一样大，且在按钮的下面，刚开始宽度为0

2.鼠标移动过去:

button的真正的背景色设置为透明，z-index:1

然后给最下面一层的颜色是以前的背景色，z-index:-2，width:100%

按钮下面一层，z-index:-1,背景色为新背景色，width:100%,再设置个过渡动画

通过这个技巧可以实现这个效果：

<!DOCTYPE html>
<html lang="en">
        <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%;