I have been experimenting with a mouseover effect using mix-blend-mode. The effect is functioning as desired in Chrome and Firefox.
.btn-anim {
position: relative;
display: inline-block;
overflow: hidden;
padding: 1.25rem;
color: #fff;
--x: 66%;
--y: -34%;
}
.btn-anim:after,
.btn-anim:before {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
transition: transform cubic-bezier(0.88, 0.03, 0, 0.94) 0.3s;
}
.btn-anim:before {
content: "";
position: absolute;
--tw-bg-opacity: 1;
background-color: rgba(243, 109, 69, var(--tw-bg-opacity));
z-index: -1;
transform: translateX(var(--x));
}
.btn-anim:after {
content: "";
position: absolute;
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
mix-blend-mode: difference;
transform: translateX(var(--y));
}
.btn-anim:hover:before {
transform: translateX(0);
}
.btn-anim:hover:after {
transform: translateX(-100%);
}<a href="" class="btn-anim">Learn More About Services</a>Codepen - https://codepen.io/felixaj/pen/GROJyoR
Safari displays a black patch. Any solutions to fix this issue?
https://i.sstatic.net/JGPOn.png
Alternatively, is there another method I can use to achieve the same effect?
Edit ---
This effect only works with a white background. Is there an alternative approach for achieving it on a light gray background?
Updated Codepen with a button in a div having a gray background.