<a href="#"><span>Man braid four loko bitters, pinterest sriracha hoodie small batch man bun.</span></a>

$teal: #9BCCB9;
$blue: #84A8C1;
$violet: #7B7EAD;
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
a {
  display: block;
  width: 250px;
  font-family: sans-serif;
  text-decoration: none;
  font-weight: bold;
  color: black;
  line-height: 1.5rem;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  span {
    background-image: linear-gradient(to bottom, white 70%, transparent 70%), linear-gradient(to right, $violet 33%, $blue 33%, $blue 66%, $teal 66%);
    background-size: 306% 100%;
    background-position: 100% 0;
    transition: 1s background-position;
  }
  &:hover span {
    background-position: 0%;
  }
}