I am trying to dynamically change the color of a button on hover using a sliding motion. Everything works correctly except for the fact that the pseudo element covers the actual link text. The text itself is made transparent and I am using a background clip to achieve the dynamic slide.
I made some tests and if the text has a color the pseudo element doesn't cover it. However, when using the background to fill the text, the pseudo element (or at lest its background) seems to skip the z-index and always sit above the background of the actual element.
I am now out of ideas and asking to the internet for help
<div class="link-container">
<a class="link link1" href="/projects">CHECK MY WORK</a>
<a class="link2" href="/contact" style="text-align: end;">GET IN TOUCH</a>
</div>
.link-container {
display: flex;
justify-content: space-between;
.link1 {
...same as link 2
}
}
.link2 {
z-index: 0;
margin: 2rem 0;
font-size: 3rem;
color: transparent;
border: 5px solid black;
font-weight: bold;
position: relative;
background: linear-gradient(to right, black 50%, white 50%);
background-clip: text;
background-size: 200%;
background-position: left;
&:after {
z-index: -1;
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: black;
}
}
}
