如何在这样的按钮中给阴影？

Question

在此按钮中出现阴影,它看起来像另一个按钮边框.我试图使用box-shadow财产,但我失败了.

我用过这个CSS

a {
  padding: 10px 40px;
  border-radius: 30px;
  font-size: 18px;
  color: #fff;
  border: 1px solid #fff;
  box-shadow: 5px 5px 0px #2CBFBB;
}

谁能帮帮我吗？

Answer 1

您可以filter: drop-shadow通过透明背景实现此效果:

body {
  background: #76D7C4;
}

button {
  text-transform: uppercase;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  background: transparent; /* no background! */
  border: 1px solid white;
  border-radius: 100px;
  filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}

<button>Learn More</button>