🔘 按钮CSS生成器
随心定制 · Hover效果 · 一键复制
随心定制 · Hover效果 · 一键复制
组合渐变背景、box-shadow阴影和hover态颜色偏移可创建有质感的按钮。按钮应保持4:1的对比度以满足无障碍要求。
通常让hover态颜色比默认态稍亮(+10%)或稍暗(-10%)。也可加轻微上移(translateY(-2px))和阴影加深营造浮起效果。
触屏设备推荐最小触摸目标44x44px。桌面端按钮padding通常8-16px垂直、16-32px水平。字体不应小于14px。
根据背景底色决定：深色背景用白字，浅色背景用深字。可用对比度公式验证文字可读性，低对比在强光下会看不清。
正圆按钮用于图标按钮（如+、×、放大镜），圆角矩形按钮用于文字按钮。胶囊形(999px)是当前最流行的文字按钮风格。
经验值：垂直padding约8-16px，水平约2倍垂直。文字较时可适当加大水平padding，保证"呼吸感"，避免文字贴边。
建议统一风格：同一种视觉层级（主/次/三级）用同一套参数，颜色和圆角保持一致，整体才协调。变化过多会让界面显乱。
用disabled属性配合样式：降低透明度、去阴影、改光标为not-allowed。禁用态要明显区别于可用态，避免用户误点。
一个页面通常需要多种按钮，但视觉强度要分层次。强按钮(主操作)、弱按钮(次级)、文字按钮(低干扰)各司其职，避免用户被多个"主按钮"搞晕。
| 层级 | 样式 | 典型用途 |
|---|---|---|
| 主按钮 | 填充色+明显 | 提交、购买、确认 |
| 次级按钮 | 描边/浅填充 | 取消、更多、返回 |
| 文字按钮 | 无背景仅文字 | 链接式操作、收起 |
| 危险按钮 | 红/橙强调 | 删除、退出、清空 |
同一屏幕上主按钮建议不超过1-2个，其余用次级或文字按钮。
| 状态 | 触发 | 推荐样式 |
|---|---|---|
| 默认 | 未交互 | 填充渐变+阴影 |
| hover | 鼠标悬停 | 颜色提亮、上浮2px |
| active | 鼠标按下 | 颜色变暗、内阴影 |
| focus | 键盘聚焦 | outline 焦点环 |
| disabled | 禁用 | 透明度0.5、not-allowed光标 |
好的按钮四个状态(默认/hover/active/focus)都清晰可辨，用户交互才有良好反馈。
按钮文字要短、直接、以动词开头，如"立即购买""提交订单"，比"确认操作"更明确引导用户下一步。
| 场景 | 模糊写法 | 推荐写法 |
|---|---|---|
| 提交订单 | 确认 | 提交订单 |
| 下载文件 | 下载 | 下载安装包 |
| 注册 | 确定 | 立即注册 |
| 危险操作 | 删除 | 确认删除 |
按钮的hover过渡用transition即可，别用animation循环动画，避免用户正常操作时按钮一直"跳"。
| 动画方式 | 开销 | 建议 |
|---|---|---|
| transition: all 0.2s | 低 | hover 按需过渡 |
| animation 循环 | 高 | 避免常驻循环动画 |
| 渐变背景 | 低 | GPU 友好 |
| 尺寸 | padding | 字体 | 适用 |
|---|---|---|---|
| 小(S) | 6px 12px | 12-13px | 行内小操作 |
| 中(M) | 10px 20px | 14-15px | 常规操作 |
| 大(L) | 14px 28px | 16-18px | 主CTA |
| 超大(XL) | 18px 36px | 18-20px | 落地页首屏 |
| 状态 | 推荐样式 | 交互含义 |
|---|---|---|
| 默认 | 填充渐变+阴影 | 可点击 |
| hover | 颜色+10%亮、上浮2px | 悬停反馈 |
| active | 颜色-10%暗、内阴影 | 按下反馈 |
| focus | outline焦点环 | 键盘可访问 |
| disabled | 透明度0.5+not-allowed | 不可操作 |
1. 设置按钮各项样式参数。
2. 调整悬停态效果。
3. 查看实时预览效果。
4. 复制生成的CSS代码。