ミックスブレンドモードボタンのホバーイベントの問題

Question

mix-blend-modeを取得してバックグラウンドスライドが発生するようにしようとしています。私は一緒にa jsfiddle of it sort of workingを入れました。

問題は、見ることが必要ですmore like thisです。

しかし、私はそれのスキューや右からのスライドを取り除きたくありません。私はその例のような同じブレンドモードを使ってみましたが、私が何をしていても、赤いスライドの色はホバーに、白いテキストは赤の色で維持されません。私は疑似要素のみを使用し、htmlを最小限に抑えたいと考えています。私はこれが擬似要素を使って可能だと思うが、ブレンドモードは私と協力していないし、それを第2のフィドルのように見えるようにする方法もわからない。次のように私の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>