Verzogene Schaltfläche, die die Textfarbe beim Schweben nicht richtig ändert

Question

Also habe ich diesen Übergangseffekt, und alles funktioniert gut, aber wenn der Cursor an den Rändern dieser Schaltfläche ist (wenn ich über die verzerrten Kanten schwebe), ändert die Schaltfläche den Text nicht Farbe zu weiß. Es funktioniert nur gut, wenn ich näher zur Mitte schwebe. Gibt es eine Möglichkeit, es zu reparieren, was fehlt mir hier ..? Vielen Dank.

Hier ist der codepen: http://codepen.io/anon/pen/dvPJvx

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

<button class="skew-button"> 
    <a href="#">Button</a> 
</button> 

Answer 1

ändern Zeile 23 bis:

.skew-button:hover a