美丽的 3d 按钮 — 分步指南

美丽的 3d 按钮 — 分步指南

HTML

对于 HTML，我们只有一个带有“CLICK”文本的按钮元素。

点击

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 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/7640/32110108