伪元素在CSS变换上从下方移动到上面的父元素

Question

我有一个带有伪元素的按钮，我放在下面以创建一个点击效果。我写了这段代码：

＆＃13;

＆＃13;

button {
  appearance: none;
  --webkit-appearance: none;
  background-color: #0070c9;
  border-radius: .3em;
  border: none;
  color: white;
  display: inline-block;
  font: inherit;
  font-size: 1.5em;
  padding: 5px 10px;
  position: relative;
  text-transform: uppercase;
}
button::after {
  background-color: #005496;
  border-radius: .3em;
  bottom: -.2em;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: -1;
}
button:active, button:focus {
  outline: none;
}
button:active {
  transform: translateY(0.1em);
}
button:active::after {
  bottom: -.1em;
}

＆＃13;

<button>Button</button>

＆＃13;

＆＃13;

＆＃13;

单击该按钮时，伪元素成为按钮的背景;我希望在变换发生时和之后，光背景保留在伪元素上。是否存在伪元素在文本下移动但在按钮背景上方移动的原因？

注意：我在原始代码中没有使用任何以供应商为前缀的CSS，我刚刚将--webkit-appearance: none;添加到此页面;我将使用后处理器来处理这个问题。

修改

当处于活动状态时，按钮看起来像左边，而处于活动状态的按钮看起来像右边。

我不希望按钮在处于活动状态时变暗。我希望背景保持不变。

我希望按钮在点击时看起来像这样：

Answer 1

我还添加了一个:: before伪元素，然后在按钮处于活动状态时移动了：before和：after伪元素的z-index。我还在按钮文本周围添加了一个范围，并添加了相对位置和z-index为3的位置，以将其置于伪元素的前面。

＆＃13;

＆＃13;

button {
  appearance: none;
  background:none;
  --webkit-appearance: none;
  border-radius: .3em;
  border: none;
  color: white;
  display: inline-block;
  font: inherit;
  font-size: 1.5em;
  padding: 5px 10px;
  position: relative;
  text-transform: uppercase;
}
button span {
   position:relative;
   z-index:3;
}
button::before, button::after {
  border-radius: .3em;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  width: 100%;
}
button::before {
  background-color: #0070c9;
  top: 0;
  z-index: 2;
}
button::after {
  background-color: #005496;
  bottom: -.2em;
  z-index: 1;
}
button:active, button:focus {
  outline: none;
}
button:active span {
  bottom: -.2em;
}
button:active::before {
  z-index:2;
  background:none;
}
button:active::after{
  z-index:1;
  background-color: #0070c9;
}

＆＃13;

<button><span>Button</span></button>

＆＃13;

＆＃13;

＆＃13;