a链接hover

<a href="#" class="appointment">预约试驾</a>

<style>
   .appointment {
        margin-right: .32rem;
        padding: .08rem .16rem;
        border-radius: 4px;
        border: 1px solid #000;
        color: #000;
        line-height: 1.1;
        position: relative;
        box-sizing: border-box
    }
    .appointment:after {
        border-radius: 4px;
        width: 0;
        cursor: pointer;
        position: absolute;
        content: "";
        top: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: #a4ce4c;
        -webkit-transition: width .3s;
        transition: width .3s
    }

    .appointment:hover {
        color: #fff;
        border: 1px solid transparent
    }

    .appointment:hover:after {
        width: 100%;
        border: 1px solid #a4ce4c
    }
</style>