<a href="/"><button class="bn-32 bn32">Hover</button></a>

.bn32 {
  border-color: #ffffff;
  padding: 0.6em 2.3em;
  cursor: pointer;
  font-size: 1em;
  color: #ffffff;
  background-image: linear-gradient(45deg, transparent 50%, #000000 50%);
  background-position: 25%;
  background-size: 400%;
  -webkit-transition: background 500ms ease-in-out, color 500ms ease-in-out;
  transition: background 500ms ease-in-out, color 500ms ease-in-out;
}

.bn32:hover {
  color: #ffffff;
  background-position: 100%;
}