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>

仅在Safari上切断<button>上的box-shadow

1 个答案: