Kevin Powell - Community•2y ago

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.

CodePen

Button Background Issue

...

3 Replies

Daryl MOP•2y ago

I ended up doing the gradient stroke with box-shadow hack.

Wolle•2y ago

It seems the translate leaves the ::before behind.

Daryl MOP•2y 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

Gaming

Programming

Button gradient background missing on mouseover