I’m experiencing rather strange behavior with a button:

<div class="flex-center">
<a class="btn-shadow" role="button" href="https://example.com">Sign</a>
</div>

This is the CSS

.btn-shadow {
    align-items: center;
    background-color: var(--theme-bg);
    border: 0.2vh solid;
    border-color: var(--theme-primary);
    border-radius: 0.8vh;
    box-sizing: border-box;
    color: var(--theme-fg);
    cursor: pointer;
    display: flex;
    font-family: Montserrat;
    font-size: 1em;
    font-weight: 600;
    height: 4.8vh;
    width: auto;
    justify-content: center;
    line-height: 2.4vh;
    padding: 0 2.5vh;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin: 1vh;
}
.btn-shadow:before {
    z-index: -1;
    background-color: var(--theme-fg-60pc);
    border-radius: 0.8vh;
    content: "";
    display: block;
    height: 4.8vh;
    left: 0;
    width: 100%;
    position: absolute;
    top: -0.2vh;
    transform: translate(0.8vh, 0.8vh);
    transition: transform .2s ease-out;
}
.btn-shadow:hover:after {
  transform: translate(0, 0);
}
.btn-shadow:active {
    background-color: var(--theme-bg-hi);
    outline: 0;
}
.btn-shadow:hover {
    text-decoration: none;
    outline: 0;
}

Everything works perfectly except for one thing, which is that the shadow does not appear under the button.
I conducted a series of experiments and this was the result:

1. Changing :before to :after does not change the behavior.
2. Removing the z-index from :before shows the shadow above the button.
3. Using z-index: 2; for the button and z-index: 1; for the shadow, shows the shadow above the button.

In practice, with z-index: -1; the shadow is not visible, with any other combination of z-index the shadow is visible but above the button, even if the z-index of the button is greater than that of the shadow. Note that both the button and its shadow have a position, so z-index should work.

I also tried different browser: same behavior. I installed the z-context plugin to Chrome and it looks like that if z-index is applied to the button (value 2) and its shadow (value 1), there is a context but the shadow inherit the value 2 from button (very strange). If the button has no z-index and the shadows has it (value -1), there is no z-context- It could be a bug in the plugin, anyway.