JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="btn">Botão</div>

CSS

.btn {
  background: #fff linear-gradient(90deg, #8f2 50%, #59f 50%);
  background-position: 0% center;
  background-size: 200%;
  transition: background-position 1s;
  text-align: center; padding: 1em;
}

.btn:hover {
  background-position: 100% center;
}