按钮hover时用css实现背景色从左到右慢慢显示

.btn{
    position: relative;
    border:1px solid #F05050;
    color: #F05050;
}
.btn:after,.btn:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #ffffff;
    z-index:-2;
}

.btn:hover{
    z-index:1;
    background:transparent;
    color: #ffffff;
}

.btn:before {
    transition: .5s;
    background: #EE3939;
    z-index:-1;
}

.btn:hover:after,.btn:hover:before {
    width: 100%;
}