Проблема события зависания кнопки Mix Blend Mode

Question

Я пытаюсь получить mix-blend-mode работает так, что происходит фоновый слайд. Я собрал jsfiddle этого вида работы.

Проблема в том, что нужно, чтобы это выглядело больше так.

Но я не хочу избавляться от перекоса или скольжения справа. Я пробовал использовать те же режимы наложения, что и в этом примере, но независимо от того, что я делаю, он не поддерживает красный цвет слайда при наведении и белый текст под красным цветом. Я хотел бы использовать только псевдоэлементы и сохранить HTML здесь как минимум. Я думаю, что это возможно с использованием псевдоэлементов, однако режимы наложения не взаимодействуют со мной и не уверены, как заставить его выглядеть больше как вторая скрипка. Мой HTML-код выглядит следующим образом:

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

CSS это:

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;
}

Как заставить фоновый текст отображаться белым, только когда красный цвет скользит по этому тексту? мой mix-blend-mode код должен быть неправильным, но похоже, что это можно сделать здесь.

Answer 1

Ну, это было весело:)

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>