美丽的 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 版权协议,转载请附上原文出处链接和本声明
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」