创建一个带有轮廓和内部阴影的按钮

Question

我正在寻找在CSS中创建一个特定的按钮，需要你的帮助来实现所需的视觉效果。这是所需风格的图像。

我遇到的问题是，当我应用阴影时，它只出现在边框之外，并且不会填充按钮的背景，在中间留下黑色/透明区域（我的页面背景是黑色的，所以按钮看起来里面是空的）。

我设法在我的标题上毫无问题地获得这种效果，但在我的按钮上我做不到......

如果有人有解决方案、合适的 CSS 或重现此效果的技巧，我很感兴趣！预先感谢您的帮助。

Answer 1

我不太确定这是否是你的意思，因为描述有点模糊，但我很快就做到了：

button {
  background-color: #6A0DAD; 
  color: white;
  border: 2px solid white;
  border-radius: 30px;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;


  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 0 10px white inset; 
  
  background-clip: padding-box;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

button:hover {
  background-color: #7E0DEB;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), 0 0 10px white inset;
}