我正在寻找在CSS中创建一个特定的按钮,需要你的帮助来实现所需的视觉效果。这是所需风格的图像。
我遇到的问题是,当我应用阴影时,它只出现在边框之外,并且不会填充按钮的背景,在中间留下黑色/透明区域(我的页面背景是黑色的,所以按钮看起来里面是空的)。
我设法在我的标题上毫无问题地获得这种效果,但在我的按钮上我做不到......
如果有人有解决方案、合适的 CSS 或重现此效果的技巧,我很感兴趣!预先感谢您的帮助。
我不太确定这是否是你的意思,因为描述有点模糊,但我很快就做到了:
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;
}