css如何实现鼠标放到按钮上从左往右动画移入[可看示例]

Video_2021-07-05_174138

.hot_products_right_nav .hot_products_right_tit{
    cursor: pointer;
    width: 112px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #4a8cf6;
    float: left;
    margin-left: 20px;
    font-size: 13px;
    position: relative;
    color: #4a8cf6;
}
.hot_products_right_nav .hot_products_right_tit:after,.hot_products_right_nav .hot_products_right_tit:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    z-index:-2;
}
.hot_products_right_nav .hot_products_right_tit:hover{
    color: #fff;
    z-index:1;
    background:transparent;
   
}        
.hot_products_right_nav .hot_products_right_tit:before {
    transition: all 0.3s;
    background: linear-gradient(90deg, #4a8cf6, #2F91FF);
    z-index:-1;
}          
.hot_products_right_nav .hot_products_right_tit:hover:after,.hot_products_right_nav .hot_products_right_tit:hover:before {
    width: 100%;
}