JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hoverTest">
		<ul>
			<li><a href="#">Test Button</a>
			</li>
		</ul>
	</div>

CSS

ul {
	list-style-type: none;
}

.hoverTest {
	float: left;
	margin-right: 1px;
}

.hoverTest li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: #ff3232;
    /* Old browsers */
    background: linear-gradient(to right, red 52%, blue 48%);
    background-size: 200% 100%;
    background-position:right bottom;
    margin-left:10px;
    transition:all 0.5s ease;
}
.hoverTest li:hover {
    background-position:left bottom;
}
.hoverTest li a {
    color:white;
}