Button gradient background missing on mouseover

https://codepen.io/dmtractic/pen/eYLvmdg This button has a pseudo-element :before. This is being used only for the gradient stroke. When you mouseover the button, it seems like the pseudo-element overlaps the main background of the button even it has z-index: -1 style. I have tried my best but I think this is crazy enough to ask the community. I hope you can help.
3 Replies
Daryl M
Daryl M2y ago
I ended up doing the gradient stroke with box-shadow hack.
Wolle
Wolle2y ago
It seems the translate leaves the ::before behind.
Daryl M
Daryl M2y ago
Makes sense
a:hover:before {
-webkit-transform: translateY(-3px);
}
a:hover:before {
-webkit-transform: translateY(-3px);
}
This didn't fix the problem I updated the CSS and yeah, it's confirmed that the ::before element overlaps the background on mouseover [SOLVED] - by adding ::after pseudo element. Thanks for the clue @daswolle
Want results from more Discord servers?
Add your server