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

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>

Answer 2

基于chazsolo's answer。使用绝对定位的伪元素和CSS属性继承，可以在按钮上获得阴影而没有阴影：

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;
  
  position: relative; /* new */
}

button:after {
  content: "";
  position: absolute;
  /* Making pseudoelement the same size as container */
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* Inheriting border properties */
  border-radius: inherit;
  border: inherit;
  /* Applying filter with shadow */
  filter: drop-shadow(5px 5px 1px rgba(0, 0, 0, 0.25));
}

<button>Learn More</button>

Answer 3

您也可以合并box-shadow: ...和box-shadow: inset ...来完成此操作。只需调整box-shadow即可满足您的需求。

示例

body {
  background: #32DBD7;
}

button {
  background: transparent;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 35px;
  padding: 10px 40px;
  font-size: 34px;
  
  box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
  -moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
  -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, .25), inset 3px 3px 4px rgba(0, 0, 0, .25);
}

<button>Learn More</button>

Answer 4

＆＃13;

＆＃13;

.test { margin-top: 2em; }
a {
  padding: 10px 40px;
  border-radius: 30px;
  font-size: 18px;
  color: #fff;
  border: 1px solid #fff;
  box-shadow: 5px 5px 0 darkgray;
  text-decoration: none;
}

body {
  background-color: #2CBFBB;
}

＆＃13;

<div class="test">
  <a href="#">Learn More</a>
</div>

＆＃13;

＆＃13;

＆＃13;