Button with right arrow - transition
<p>I've made css button with right border in arrow shape, with the help of css transforms and pseudo elements. Now I'm trying to add transition to background on hover but realized there is a problem, in the place where button is overlapped by pseudo element, during transition color is different. See it below, try to hover the button: </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background: gray;
background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
  font-family: sans-serif;
}
.more-skewed {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
  border: solid 2px white;
  border-right: none;
  box-sizing: border-box;
  padding: 15px 40px;
  letter-spacing: 3px;
  transition: all 1s ease-out;
}

.more-skewed:before {
  content: '';
  position: absolute;
  left: 100%;
  margin-left: -10px;
  top: -2px;
  bottom: 50%;
  border-right: solid 2px white;
  transform: skewX(25deg);
  width: 15px;
  background: inherit;
}

.more-skewed:after {
  content: '';
  position: absolute;
  left: 100%;
  margin-left: -10px;
  bottom: -2px;
  top: 50%;
  border-right: solid 2px white;
  transform: skewX(-25deg);
  width: 15px;
  background: inherit;
}

.more-skewed:hover {
  color: black;
 background: white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="more-skewed" href="#"&gt;MORE&lt;/a&gt;</code></pre>
</div>
</div>
</p>

<p>Is it possible to resolve this? JSfiddle - <a href="https://jsfiddle.net/k9jhuc34/" rel="nofollow">https://jsfiddle.net/k9jhuc34/</a> <br>
(Button is initially transparent, and it is over image background.)</p>