Clicking on a button ignores z-index - why?

Question

I have a button where when you click it, it moves by a couple of pixels. That button has a pseudo-element behind it which acts like a box shadow but with a gradient.

When you click on the button, the pseudo-element appears to shift in front of the parent element, even though it has a lower z-index - why? Can this be avoided?

Below is a snippet to demonstrate what I mean:

button {
  background-color: black;
  color: white;
  padding: 10px;
  display: inline-block;
  border: none;
  border-radius: 3px;
  position: relative;
}

button::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  transform: translate(5px, 5px);
  border-radius: 3px;
  background: linear-gradient(to right, blue, red);
  z-index: -1;
}

button:active {
  transform: translate(2px, 2px)
}

body {
  padding: 10px;
}

<button>login</button>

This is in Brave version 1.29.77 (Chromium 93.0.4577.63) - in case it's a browser-specific thing.