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
I ended up doing the gradient stroke with
box-shadow
hack.It seems the translate leaves the ::before behind.
Makes sense
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