.btn {

    position: relative;

    width: 100px;

    margin: 50px auto;

    text-align: center;

    padding: 0 2rem;

    font-family: 'Arial', sans-serif;

    font-size: 36px;

    line-height: 4.5rem;

    color: deeppink;

    background-color: transparent;

    border: 3px solid deeppink;

    cursor: pointer;

    &:after {

        content: '';

        position: absolute;

        z-index: -1;

        top: 0;

        left: 50%;

        height: 100%;

        width: 0;

        background-color: deeppink;

        transition: width .5s, left .5s;

    }

    &:hover {

        color: white;

    }

    &:hover:after {

        top: 0;

        left: 0;

        width: 100%;

        transition: width .5s, left .5s;

    }

}

​

.btn {

    background-color: deeppink;

    background-image: linear-gradient(white, white);

    background-repeat: no-repeat;

    background-size: 0% 100%;

    background-position: center;

    -webkit-background-clip: text;

    color: transparent;

    transition: background-size .5s;

    &:hover {

        background-size: 100% 100%;

    }

}

​