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

时间:2017-10-25 00:48:33

标签: css safari

我正在尝试使用<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

1 个答案:

答案 0 :(得分:0)

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

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>