css - <button> 上的 box-shadow 仅在 Safari 上被截断

Question

我正在尝试使用 <button> 实现“按下”按钮效果和一个 <span>但出于某种原因，阴影仅在 Safari 上被切断。

我在这里使用了两个标签，因为这是我正在编辑的网站的限制，我无法更改标记。

就这么简单，HTML:

<button><span>A simple fucking button</span></button>

CSS:

button {
  -webkit-appearance: none;  
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

button span {
  text-transform: uppercase;
  font-weight: bold;
  border: 3px solid black;
  padding: 10px 35px;
  border-radius: 2em;
  display: block;
  background-color: #fff;
  box-shadow: 0px 4px 0px -2px #bfbfbf,
            0px 5px 0px 0px black;
}

button:active,
button:hover {
  color: inherit;
}

button:hover {
  span {
    transform: translate(0px, 5px);
    box-shadow: 0px 0px 0px 0px;
  }
}

codepen.io 示例: https://codepen.io/marlonmarcello/pen/dVBKpd

Answer 1

如果您愿意放弃跨度，则可以调整按钮和样式以达到所需的效果:

https://codepen.io/enquiren/pen/qMzLrd

button {
  -webkit-appearance: none;  
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  
  &.pushable {
    text-transform: uppercase;
    font-weight: bold;
    border: 3px solid black;
    padding: 10px 35px;
    border-radius: 2em;
    display: block;
    background-color: #fff;
    box-shadow: 0px 4px 0px -2px #bfbfbf,
                0px 5px 0px 0px black;
    
    &:hover {
      transform: translate(0px, 5px);
      box-shadow: 0px 0px 0px 0px;
    }
  }
}

<button class="pushable">A simple button</button>