Mix Blend Mode button hover event issue

Question

I'm trying to get a mix-blend-mode working so that a background slide happens. I have put together a jsfiddle of it sort of working.

Problem is, need it to look more like this.

But I do not want to get rid of the skew on it or the slide in from the right. I've tried using the same blend modes as in that example, but no matter what I do, it doesn't maintain the red slide color on hover and white text under the red color. I would like to use pseudo elements only and keep the html to a bare minimum here. I would think this is possible using the pseudo elements, however the blend modes are not cooperating with me and not sure how to get it to look more like the second fiddle. My html is as follows:

<a href="#" class="btn">View Project</a>

CSS is:

a {
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding: 15px 30px;
  border: 1px solid #f16251;
  background: black;
  color: #f16251;
  font-size: 30px;
  font-family: arial;
  mix-blend-mode: normal;
  overflow:hidden;
  z-index: 1;
}
a:before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 100%; height: 100%;
  background: red;
  mix-blend-mode: multiply;
  transform-origin:0 0 ;
  transform:translateX(100%) skewX(30deg);
  transition: transform .25s;
  z-index: 3;
}
a:hover:before {
  transform: translateX(45%) skewX(30deg);
}
a:hover:after {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  width: 100%;
  height: 100%;
  background: white;

}
a:after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 100%; height: 100%;
    background: white;
    mix-blend-mode: difference;
    z-index: 2;
}

How do I get the background text to display in white only when the red color slides over that text? My mix-blend-mode code has to be wrong, but it looks like it is possible to do here.

Answer 1

Well, this was fun :)

a {
  position: relative;
  text-decoration: none;
  display: inline-block;
  padding: 15px 30px;
  border: 1px solid #f16251;
  background: white;
  color: black;
  font-size: 30px;
  font-family: arial;
  mix-blend-mode: normal;
  overflow:hidden;
  z-index: 1;
}

a:before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 100%; height: 100%;
  background: white;
  mix-blend-mode: difference;
  transform-origin:0 0 ;
  transform:translateX(100%) skewX(30deg);
  transition: transform .25s;
  z-index: 3;
}
a:hover:before {
  transform: translateX(45%) skewX(30deg);
}

a:after{
  content: '';
  display:block;
  top: 0;
  left:0;
  bottom:0;
  right:0;
  position: absolute;
  z-index: 100;
  background: #f16251;
  mix-blend-mode: screen;
}

<a href="#" class="btn">View Project</a>