Slide animation text color change

Question

I have a button that has a background color slide in from the right on hover, which works fine, however I need the text color to change as well. I have managed to have it fade, but that doesn't work properly. What I would like is a color transition slide in from the right in concert with the background change.

.slideybutton {
    background-size: 200% 100%;
    background-image: linear-gradient(to right, white 50%, blue 50%);
    transition: background-position 1s linear, color 1s linear;
    color: blue;
}
.slideybutton:hover {
    background-position: -100% 0;
    color: white;
}

<a class="slideybutton">
 Lorem ipsum dolor sit amet.
</a>

I have seen this question, but the only solution is unfeasible in this instance. Sliding in changing text color animation

Is there some CSS trick I am missing? Google searches don't result in anything pointing me in the right direction, so I am concerned I am attempting the impossible.

I'm happy to utilise JS or jQuery if it will accomplish what I want.

Answer 1

This could be done by "combining the text with the background", the key is property background-clip, check this out:

.slideybutton { 
  background-size: 200% 100%; 
  background-image: linear-gradient(to right, blue 50%, white 50%),
                    linear-gradient(to right, white 50%, blue 50%);
  transition: background-position 1s linear; 
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box; 
  color: transparent; 

} 
.slideybutton:hover { 
  background-position: -100% 0; 
}

<a class="slideybutton">
 Lorem ipsum dolor sit amet.
</a>

Answer 2

Just providing an alternative using pseudo elements. Works fine on chrome.

.slideybutton {
  position: relative;
}
.slideybutton:hover {
  /* to fix a bug in IE */
}
.slideybutton:hover::after {
  width: 100%;
}
.slideybutton::before {
  content: attr(title);
  color: blue;
}
.slideybutton::after {
  content: attr(title);
  position: absolute;
  left: 0;
  width: 0;
  top: 0;
  bottom: 0;
  color: white;
  transition: width 1s linear;
  background-color: blue;
  white-space: nowrap;
  overflow: hidden;
}

<a class="slideybutton" title="Lorem ipsum dolor sit amet.">

</a>