按钮 CSS 过滤器仅父级阴影

Question

大家好，我需要你们的帮助

，我想这样做： Model Botton

问题是，当我添加一个过滤器

滤镜：drop-shadow(3px 4px 0px #0000B8);

我的按钮的结果是： 我的 Botton

你能帮我吗？

Answer 1

有多种方法可以做到这一点。

以下是一些示例：

.button-1 {
  position: relative;
  color: #ff1800;
  background-color: white;
  font-size: 1.2em;
  font-weight: bold;
  border: 2px solid #ff1800;
  padding: 15px;
  border-radius: 100px;
}

.button-1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  border: 2px solid #ff1800;
  border-radius: 100px;
  filter: drop-shadow(7px 12px 0px #0000B8);
  z-index: -1;
}

.button-2 {
  color: #ff1800;
  background-color: transparent;
  font-size: 1.2em;
  font-weight: bold;
  border: 2px solid #ff1800;
  padding: 15px;
  border-radius: 100px;
  box-shadow: 5px 10px 0 -2px white,
    5px 10px 0 0 #0000B8;
}

.button-3 {
  position: relative;
  color: #ff1800;
  background-color: white;
  font-size: 1.2em;
  font-weight: bold;
  border: 2px solid #ff1800;
  padding: 15px;
  border-radius: 100px;
}

.button-3::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 4px;
  top: 8px;
  right: 0;
  bottom: 0;
  background-color: transparent;
  border: 2px solid #0000B8;
  border-radius: 100px;
  z-index: -1;
}

<button class="button-1">
  Become a seller
</button>

<button class="button-2">
  Become a seller
</button>

<button class="button-3">
  Become a seller
</button>

遗憾的是，这些方法都无法拥有完全透明的背景。