スキューしたボタンがホバー上のテキストの色を正しく変更しない

Question

このトランジション効果が得られ、すべて正常に機能しますが、カーソルがこのボタンの端にあるとき（スキューされたエッジにカーソルを置いたとき）色は白です。私が真ん中に近づいたときにうまくいく。それを修正する方法はありますか、私はここで何が欠けていますか？ありがとうございました。ここで

は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

変更線23に：

.skew-button:hover a