title: Skewed button not changing text color on hover properly
body: <p>So I got this transition effect, and everything works fine but when the cursor is at the edges of this button(when I hover over the skewed edges), button does not change the text color to white. It works well only when I hover closer to the middle. Is there a way to fix it, what am I missing here..? Thank you.</p>
  
  <p>Here's the codepen: <a href="http://codepen.io/anon/pen/dvPJvx" rel="nofollow noreferrer">http://codepen.io/anon/pen/dvPJvx</a></p>
  
  <pre><code>.skew-button {
        border: 1px solid red;
      border-radius: 3px;
      background: #FFF;
      transform: skew(-20deg);
  }
  
  .skew-button a {
      position: relative;
      display:block;
      text-decoration:none;
      z-index: 10;
      transform: skew(20deg);
      color: black;
      font-size: 1rem;
      font-weight: 600;
      font-family: 'Raleway', sans-serif;
      padding: 10px 12px;
      text-transform: uppercase;
      transition: all .2s linear;
  }
  
  .skew-button a:hover {
    color: #FFF;
    cursor: pointer;
  }
  
  .skew-button:after {
      content:"";
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      color: #fff;
      height: 100%;
      background: red;
      opacity: 0;  
      transition: all .2s linear;
  }
  
  .skew-button:hover:after {
      width: 100%;
      opacity: 1;
  }
  
  &lt;button class="skew-button"&gt;
    &lt;a href="#"&gt;Button&lt;/a&gt;
  &lt;/button&gt;
  </code></pre>