css动画，.box:hover:before

css部分

<style>
        body{
            margin:0;
        }
        .box{
            height:50px;
            background:#E3872D;
            border-radius:3px;
            overflow:hidden;
            width:200px;
            color:#fff;
            line-height:50px;
            text-align:center;
            position: relative;
            transition: width 0.8s;
        }
        .box:before{
            content:"";
            width:0%;
            height:100%;
            background:#041230;;
            position: absolute;
            top:0;
            left:-20%;
            transition: width 0.8s;
            transform: skew(50deg);
        }
        .box:hover:before{
            /*content:"";*/
            width:200%;
            /*left:-5%;*/
            /*height:100%;
            background:#041230;;
            position: absolute;
            top:0;*/
        }
        span{
            position:relative;
        }
    </style>

html部分

<div class="box">
        <span>send message</span>
    </div>