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

本文链接：https://www.qanswer.top/2848/08333108