0

I have a button in CSS with an effect when hovered : a glow around it

When I add a shrink effect on click, this has the very unexpected result of making the red background come to the foreground when clicked

How to keep the red glow in the background on click ? Here is the included working snippet :

<style>
.button-glow {
  margin: 2.5rem;
  width: 5rem;
  color: white;
  background: blue;
  border-radius: 50px;
  transition: all 500ms;
  position: relative;
}
.button-glow:active {
  transform: scale(0.97);
}
.button-glow:hover:after {
  content: '';
  background: red;
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: -1;
  filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 50px;
}
</style>

<button class="button-glow"> Test </button>
Eli O.
  • 1,543
  • 3
  • 18
  • 27
  • 2
    Does this answer your question? [z-index is canceled by setting transform(rotate)](https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate) – dantheman Apr 03 '23 at 20:23
  • 2
    read at the end of the duplicate to find the 3D hack, also read this: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/ – Temani Afif Apr 03 '23 at 20:27
  • Thanks. the solution I found working was this one : https://stackoverflow.com/a/67392388/7333766 – Eli O. Apr 07 '23 at 18:13

0 Answers0