美丽的 3d 按钮 — 分步指南
美丽的 3d 按钮 — 分步指南
HTML
对于 HTML，我们只有一个带有“CLICK”文本的按钮元素。
<button>点击</button>
CSS
现在我们将为按钮设置一些基本样式。
首先，我们将通过将border 属性设置为none 来移除按钮的默认边框。
我们将背景颜色设置为#976D70，文本颜色设置为#fff。
我们将添加一些填充，使其看起来不错。
当然还有过渡。因此，我们稍后将添加的悬停效果非常流畅。
我们将边框半径设置为 6px。
现在我们将添加两个阴影。
第一个 (#665367 0 7px 2px) 代表按钮的底部，创建 3d 效果，第二个 (#000 0 8px 6px) 是实际的阴影。
按钮 {
边框：无；
背景颜色：#976D70；
颜色：#fff;
填充：10px 20px；
过渡：0.2s；
边框半径：6px；
盒子阴影：#665367 0 7px 2px，#000 0 8px 6px；
光标：指针；
}
激活时（点击时），我们将按钮变换 8px 并减少阴影。
这将创建按钮按下效果。
按钮：活动{
变换：translateY（8px）；
盒子阴影：#665367 0 0 0，#000 0 0 3px；
}
您可以通过视频教程找到完整的代码 这里 .
感谢您的阅读。 ❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
