How to make button fall in pseudo-element on hover? - html

Question

I'm attempting to make a button that has an ::after content of transparent background and white border. Button is supposed to fall into that content without ::after changing any position.
I'm having some trouble figuring it out.
Here's the code.
button {
position: relative;
color: black;
font-size: 1.625rem;
background-color: yellow;
border: 1px solid white;
padding: 15px 50px;
cursor: pointer;
}
button::after {
content: "";
position: absolute;
left: 0.8rem;
top: 0.8rem;
width: 100%;
height: 100%;
background: transparent;
border: 1px solid white;
transition: all 0.3s;
z-index: -1;
}
You can find exact look on this JFiddle Link: https://jsfiddle.net/d7knzb1p/6/
thank you all

Answer 1

You can try to have :hover for your button and button::after
button:hover::after to reset the shadowed layer to the original button
Another key change here is that we'd use translate for the better animation
body {
background-color: black;
}
button {
position: relative;
color: black;
font-size: 1.625rem;
background-color: yellow;
border: 1px solid white;
padding: 15px 50px;
cursor: pointer;
transition: all 0.2s;
}
button:hover {
background-color: transparent;
transform: translate(0.8rem, 0.8rem);
color: white;
}
button:hover::after {
content: "";
transform: translate(-0.8rem, -0.8rem);
}
button::after {
content: "";
position: absolute;
left: 0.8rem;
top: 0.8rem;
transform: translate(0, 0);
width: 100%;
height: 100%;
background: transparent;
border: 1px solid white;
transition: all 0.2s;
z-index: -1;
}
<button>
BUY
</button>