Animate the background of a button.

gistfile1.txt

<button class="btn-l-r btn">Left to Right</button>

<button class="btn-r-l btn">Right to Left</button>

<button class="btn-t-b btn">Top to Bottom</button>

<button class="btn-b-t btn">Bottom to Top</button>

button {
    display: inline-block;
    padding: 20px 40px;
    margin-right: 50px;
    border: 1px solid black;
    background: linear-gradient( to left, #ebebeb 50%,     red 50% );
	background-size: 200% 100%;
	
    cursor: pointer;
    transition: all ease .3s;
}

.btn-l-r{
    background-position: right top;
    &:hover {
        background-position: left top;
        color: white;
    }
}

.btn-r-l{
    background: linear-gradient( to right, #ebebeb 50%,     red 50% );
    background-size: 200% 100%;
    background-position: left bottom;

    &:hover {
        background-position: right top;
        color: white;
    }
}

.btn-t-b{
    background: linear-gradient( to bottom, red 50%,     #ebebeb 50% );
    background-size: 100% 200%;
    background-position: left bottom;

    &:hover {
        background-position: right top;
        color: white;
    }
}

.btn-b-t{
    background: linear-gradient( to bottom, #ebebeb 50%,     red 50% );
    background-size: 100% 200%;
    background-position: left top;

    &:hover {
        background-position: right bottom;
        color: white;
    }
}