如何制作内外阴影效果按钮？

Question

我尝试创建一个 CSS 效果按钮同上，与我提供的图像相同，（忽略图标）但是尝试但没有得到相同的结果有没有办法创建一个完美的相同 CSS 按钮？ [![在此处输入图片描述][1]][1]

下面是我的按钮代码我的 HTML 按钮

.my-bt{
display:block;
position:relative;
background: linear-gradient(310deg, #dcb7e0, #dbdaef);
padding:10px;
text-align:center;
border-radius:10px;
}

<div class='my-bt'>Hello World</div>

请帮我创建 101% Same ditto 按钮 [1]: https://i.stack.imgur.com/omwyj.jpg

Answer 1

你能检查一下下面的代码吗？希望它对你有用。我们根据您的要求使用了多个box-shadow。

请参考这个link：https://jsfiddle.net/yudizsolutions/ry2sqpue/

如需更多参考，您还可以使用 link：https://codepen.io/yudizsolutions/pen/mdrKdVa

body {
  background-color: #f1f0f5;
}

.my-bt {
  background-color: #fff;
  box-shadow: 6px 6px 18px 0 #e3deed, -6px -6px 18px 0 rgb(255, 255, 255, 0.5);
  margin: 20px 10px;
  padding: 25px;
  border-radius: 25px;
  text-align: center;
}

<div class="my-bt">
  Hello World
</div>

如何制作内外阴影效果按钮？

How to create inner and outside shadow effect button?

html

javascript

css

sass

button