做出"真能按下去"的按钮 —— 3D 凸起 / 拟物 / 玻璃质感,实时预览可悬停可按压,导出完整 :hover/:active CSS
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
user-select: none;
padding: 14px 32px;
font-size: 16px;
font-weight: 600;
font-family: inherit;
line-height: 1;
color: #ffffff;
background: #6366f1;
border: none;
border-radius: 12px;
box-shadow: 0 6px 0 #4d50bc, 0 8px 16px rgba(0, 0, 0, 0.28);
transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 0 #4d50bc, 0 10px 22px rgba(0, 0, 0, 0.36);
}
.btn:active {
transform: translateY(5px);
box-shadow: 0 1px 0 #4d50bc, 0 1px 8px rgba(0, 0, 0, 0.28);
}
.btn:focus-visible {
outline: 2px solid #9294f5;
outline-offset: 2px;
}这个按钮生成器把整段交互都建出来,而不是只给你一张静止图。选好风格,然后把鼠标移到右边的实时预览上、按下去试试 —— 3D 凸起预设会真的在你指针下"沉"下去,因为导出的代码带的是配套的 :hover 和 :active 规则,不是一帧死图。生成干净的 CSS、HTML 标签或 Tailwind 类名,一键复制。
这个工具能做什么
一个可视化 CSS 按钮生成器,围绕一个多数生成器忽略的点:按钮应该 看起来"真能按下去"。选一个风格预设 —— 扁平、3D 凸起、拟物、玻璃、 描边、渐变 —— 再调内边距、字号字重、圆角、填充(纯色或渐变)、 文字色、边框、阴影深度。右侧预览是一颗真按钮:鼠标移上去它会抬起, 按下去 3D 凸起预设会沉到与页面齐平,因为导出的是配套的 :hover 和 :active 规则 —— 一层无模糊的纯色"侧墙"box-shadow,加上配套的 translateY —— 不是一帧死图。一键复制多状态 CSS、现成 HTML 标签、 或 Tailwind 任意值类名。实时 WCAG 对比度读数会在文字色相对填充 低于 4.5:1 时报警,让"无障碍按钮"成为默认,而不是事后补丁。全部 在浏览器本地运行;完整配置写进分享 URL,一个链接就能还原这颗按钮。
工具细节
- 输入
- 文件 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 可分享链接状态
- 关键设置会进入 URL，复制链接后别人能复现同一组参数。
- 性能预算
- 首屏 JS ≤ 14 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS 按钮生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
给落地页做一颗"看着就想点"的主 CTA
你的 hero CTA 摆在打磨过的竞品旁边显得很平。选 3D 凸起预设, 填充设成品牌色,深度调到 6-8px,圆角 12px 左右。悬停预览确认 抬起效果到位,再按一下 —— 下沉手感对了就复制 CSS。这样你一次 粘贴就 ship 了带真实 :hover 和 :active 的按钮,而不是手写三个 规则块、再去猜那个让按压看起来"物理真实"而不是"抖动 bug"的 translateY 和 box-shadow 配比。
还原 Dribbble 上的拟物 UI,不用自己算阴影
你看上一个 soft-UI 设计,需要一颗能用的按钮。选拟物预设,背景 设成页面表面色(诀窍:按钮和页面必须同一个底色),再微调深度和 模糊。工具帮你算好暗/亮双阴影,按下时翻成 inset。看一眼 WCAG 读数 —— 拟物通常过不了,如果警告是红的,先把文字色调深再交给 前端。
在 hero 大图上放一颗玻璃按钮
照片上压一颗磨砂玻璃按钮是 2025 的流行做法。选玻璃,玻璃模糊 调 10-14px,填充保持浅色半透明,加一条 1px 白边做边缘。把预览 切到浅色底,对着亮照片检查文字是否还看得清。复制 CSS 压到 hero 上,backdrop-filter 会把按钮背后的内容糊掉 —— Safari 要的 -webkit- 前缀已经替你带上了。
给设计系统生成一整套风格一致的按钮
你需要主按钮、次按钮、幽灵按钮,而且要像一家人。用渐变或 3D 凸起预设做主按钮,复制 CSS,再切到描边做幽灵变体,圆角、内边距、 过渡时长都保持一致,它们摆一起就协调。分享 URL 能把每个变体存成 链接,以后再打开微调,不用再维护一个堆满半成品 CSS 的草稿文件。
给开发交付时把交互原型敲定
设计师能说"点击时要按下去",但开发要确切数值。把按压调到预览 手感对了,然后把生成的 :active 块原样交过去 —— translateY、 收缩后的 box-shadow、过渡时长全写明了。不用再为"再 Q 弹一点" 来回扯;数字都在导出里,分享链接还能复现设计师签字确认的那个 预览。
常见踩坑
忘了写 :active。只有 hover 抬起、没有按压反馈的按钮,点下去会觉得"坏了"—— 指针按下去但什么都不动。3D 凸起预设永远会输出 :active 块;如果你从扁平起步,自己在 :active 上加一点 translateY + 亮度变化,或者换预设。深度类预设的导出 CSS 已经带上了。
按压的 translateY 和侧墙高度对不上。如果按钮 :active 下沉 10px 但 3D 侧墙只有 6px,顶面会冲过侧墙原来的位置,按压看起来像 bug 而不是按下。让工具帮你配对 —— 它把 translateY 设成 深度-1,让顶面落得齐平。别只手改其中一个。
拟物用了按钮和页面不同的背景色。soft UI 只有在按钮和它的表面同一个底色时才成立 —— 这才是"挤出来"而不是"贴上去"的关键。如果页面是白的、按钮是灰的,双阴影会读成一圈奇怪的光晕。把预设背景设成你页面真实的底色。
隐私说明
所有 CSS 生成、阴影几何、渐变字符串、WCAG 对比度运算都是浏览器 标签页里跑的纯 JavaScript。颜色、文案、生成的代码都不上传,也不 统计你设计了什么。一个要留意的点:完整按钮配置会编码进可分享的 URL query string,所以你粘到 Slack 或邮件的"分享链接"会带上你的 颜色和文案 —— 对方服务器的访问日志会记下它们。日常无所谓;如果是 还没发布的品牌色,请手动复制 CSS 而不是分享 URL。你保存的界面 偏好(当前导出标签、预览底色)只存在这个浏览器的 localStorage 里。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。