믹스 블렌드 모드 버튼 호버 이벤트 문제

Question

백그라운드 슬라이드가 발생하도록 mix-blend-mode을 작동 시키려고합니다. 나는 a jsfiddle of it sort of working을 모았다.

문제는 more like this입니다.

하지만 나는 오른쪽의 기울기 또는 오른쪽의 기울기를 제거하고 싶지 않습니다. 나는 그 예제에서와 같은 블렌드 모드를 사용하려고 시도했지만, 내가 무엇을 하든지 빨간색 슬라이드 색상을 마우스로 가리키면 흰색 텍스트가 빨간색으로 유지되지 않습니다. 난 단지 의사 요소를 사용하고 HTML을 최소한으로 유지하고 싶습니다. 나는 이것이 pseudo elements를 사용하여 가능하다고 생각할 것입니다.하지만 블렌드 모드가 제게 협조적이지 않고 두 번째 바이올린처럼 보이게하는 방법을 모르겠습니다. 다음과 같이 나의 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>