CSS3按钮怎么做：从圆角、渐变到悬停效果
按钮看起来只是一个带颜色的矩形，实际却同时承担交互、状态反馈和信息层级等任务。CSS3 可以为按钮添加圆角、渐变、阴影、过渡动画等视觉效果，但样式不是按钮本身：语义、键盘操作、点击行为和禁用逻辑仍要由 HTML 与 JavaScript 负责。
本文从可直接运行的基础示例开始，逐步介绍圆角、渐变、悬停、按下、焦点和禁用状态，并说明常见边界。示例使用原生 CSS，不依赖框架；将代码保存为 button.html 后用浏览器打开即可查看。
先选对 HTML 元素
需要执行操作时，优先使用 <button>，例如提交表单、打开对话框、展开菜单。需要导航到另一个地址时，使用带有真实 href 的 <a>。不要仅仅因为链接看起来像按钮，就把它改成没有链接语义的 div；也不要用按钮代替普通导航链接。
button 在表单中默认可能是提交按钮。若它只负责打开弹窗或切换界面，应明确写上 type="button"，避免意外提交表单。下面的页面包含操作按钮、链接按钮和表单提交按钮，可直接运行：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS 按钮示例</title>
<style>
:root {
--blue: #1769e0;
--blue-dark: #0e4fb5;
--text: #172033;
--muted: #637083;
--focus: #ffbf47;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 2rem;
color: var(--text);
font: 16px/1.6 system-ui, sans-serif;
background: #f4f7fb;
}
.demo {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.btn {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
padding: 0.65rem 1.1rem;
border: 1px solid transparent;
border-radius: 0.65rem;
font: inherit;
font-weight: 650;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition:
background-color 160ms ease,
border-color 160ms ease,
box-shadow 160ms ease,
transform 160ms ease;
}
.btn-primary {
color: #fff;
background: linear-gradient(180deg, #3385f3, #1769e0);
box-shadow: 0 3px 8px rgb(23 105 224 / 22%);
}
.btn-primary:hover {
background: linear-gradient(180deg, #2676e5, #0e4fb5);
box-shadow: 0 5px 12px rgb(23 105 224 / 28%);
transform: translateY(-1px);
}
.btn-primary:active {
transform: translateY(0);
box-shadow: 0 1px 3px rgb(23 105 224 / 25%);
}
.btn-secondary {
color: var(--text);
background: #fff;
border-color: #bcc6d4;
}
.btn-secondary:hover {
background: #edf3fb;
border-color: #71829a;
}
.btn:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
color: #5e6877;
background: #e1e5eb;
border-color: #d0d6df;
box-shadow: none;
cursor: not-allowed;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.btn {
transition: none;
}
}
</style>
</head>
<body>
<h1>按钮样式示例</h1>
<div class="demo">
<button class="btn btn-primary" type="button">保存更改</button>
<a class="btn btn-secondary" href="#details">查看说明</a>
<button class="btn btn-primary" type="button" disabled>暂不可用</button>
</div>
<form action="/subscribe" method="post">
<button class="btn btn-primary" type="submit">提交表单</button>
</form>
<p id="details">链接会导航到页面中的说明区域。</p>
</body>
</html>示例中的按钮样式由 .btn 提供基础布局和交互细节，再由 .btn-primary、.btn-secondary 设定视觉类型。把结构与颜色分开，便于复用，也能避免同一套按钮在不同页面逐渐出现不一致的尺寸和状态。
圆角：从矩形到胶囊按钮
border-radius 控制边框盒的圆角，可以使用长度值、百分比，也可以分别指定四个角。常见写法包括：
border-radius: 4px：轻微圆角，适合偏严肃、紧凑的界面。border-radius: 10px：较明显但仍保留矩形轮廓，常用于通用操作按钮。border-radius: 999px：在按钮高度有限时形成胶囊形状。数值不必恰好等于某个最大值，只要足够大，圆角就会受盒子尺寸约束。border-radius: 50%：圆角按元素尺寸的百分比计算。用于宽高相等的图标按钮时可得到圆形；用于宽而矮的按钮时会形成椭圆，不一定是胶囊形状。
圆角不是固定像素限制。CSS 接受有效的长度和百分比值，浏览器会根据盒子尺寸计算结果；半径过大时，会按规范调整圆角，避免相邻圆角重叠。实际设计中不必追求极大的数值，选用适度半径并在组件间保持一致，通常更容易形成清晰的视觉体系。
如果只想改变某个角，可以分别设置 border-top-left-radius 等属性；也可以用简写声明多个角。圆角仅影响边框盒的外观，不会自动裁剪所有子元素。若按钮内部包含超出边界的装饰内容，需评估是否使用 overflow: hidden；不要为了圆角无条件裁剪内容，以免截断焦点指示、阴影或其他需要显示的部分。
渐变：让颜色过渡有层次
linear-gradient() 会生成 CSS 图像，可用作 background 或 background-image。第一个参数可指定方向，后续参数提供颜色停靠点。例如：
background: linear-gradient(180deg, #3385f3, #1769e0);这里的 180deg 表示渐变方向；两个十六进制颜色是两端的颜色。也可以使用关键字方向、多个颜色停靠点或带位置的停靠点：
background: linear-gradient(to right, #1976d2 0%, #42a5f5 55%, #90caf9 100%);渐变不需要额外图片请求，适合单色到双色的按钮底色、边框装饰和简单高光。但它不会替代对比度检查：渐变沿按钮表面变化，文字需要在最不利的背景区域仍足够清晰。若渐变只是为了“更立体”，却令文字可读性下降，应优先简化配色。
渐变函数的参数并没有一个适用于所有浏览器和场景的简单固定个数上限；应使用 CSS 语法允许的方向和颜色停靠点，并考虑项目支持的浏览器。颜色可以用名称、十六进制、RGB、HSL 等 CSS 颜色表示法。旧浏览器对较新的颜色语法或颜色空间支持情况可能不同，面向旧环境时要按目标浏览器测试。对于关键按钮，建议先给出纯色背景作为回退，再声明渐变：
.btn-primary {
background-color: #1769e0;
background-image: linear-gradient(180deg, #3385f3, #1769e0);
}在支持渐变的浏览器中，后声明的背景图像会覆盖纯色表面；不支持该渐变的环境仍可显示背景色。不要把 background: linear-gradient(...) 简单理解成同时设置了可见的纯色回退：background 是复合简写，会重置其他背景子属性。
阴影和边框：增强层次但不替代状态提示
box-shadow 可以让按钮从背景中略微浮起，例如：
box-shadow: 0 3px 8px rgb(23 105 224 / 22%);前两个长度分别控制水平和垂直偏移，后面的模糊半径控制阴影扩散程度，颜色可以带透明度。还可以在阴影中加入扩展半径，或用逗号分隔多层阴影。阴影会增加视觉层次，但过重的阴影容易让按钮显得像浮层，也可能在高对比度或不同显示条件下不够明显。不要只靠阴影表示悬停、选中或禁用状态，应同时改变颜色、边框或其他可感知特征。
边框也能明确按钮轮廓。浅色背景上的白色次要按钮如果没有边框，边缘可能难以辨认；可加一条与背景有足够区别的边框。边框宽度会参与盒模型计算，示例使用 box-sizing: border-box，让声明的尺寸包含内边距和边框，便于控制布局。若不设置这个属性，默认的 content-box 会把内边距和边框额外加到内容尺寸之外。
悬停、按下与过渡效果
:hover 可描述指针悬停时的状态，常用于改变背景色、边框、阴影或位置。:active 表示元素处于激活状态，通常对应按下鼠标或正在触摸的瞬间。两者表达的是不同交互阶段，不要只写悬停效果而忽略按下反馈。
transition 可以让属性变化更平滑。示例仅对背景颜色、边框颜色、阴影和位移设置短暂过渡，避免对所有属性一概使用 transition: all。明确列出需要变化的属性更容易控制，也能减少意外动画。时长不是浏览器规定的按钮参数上限；实际值属于设计取舍，操作反馈通常应短而清楚，不能让用户等动画结束才能感知状态。
触屏设备通常没有传统指针悬停状态，因此不能把关键信息或唯一操作入口放在 :hover 才出现的效果中。也可以用 @media (hover: hover) 将纯悬停装饰限定到具备悬停能力的设备，但仍要提供按下、焦点和默认状态。示例中的轻微上移只是装饰，不影响按钮的实际点击行为；避免大幅移动按钮，以免视觉位置与点击区域之间产生错位感。
键盘焦点与无障碍状态
键盘用户需要知道当前焦点所在的位置。浏览器默认焦点轮廓虽然朴素，却有重要作用，不应通过 outline: none 删除后不做替代。示例使用 :focus-visible 为键盘导航等需要明显提示的情况提供高亮轮廓，并用 outline-offset 将轮廓与按钮边缘拉开。请在真实页面中确认轮廓不会被容器的 overflow: hidden 裁切，也不会与相邻控件混在一起。
按钮文字应说明操作结果。像“确定”“这里”这样的标签在单独阅读时不够明确；可以根据场景写成“保存更改”或“下载报告”。如果按钮只含图标，应提供可访问名称，例如使用有意义的文本或合适的 aria-label；装饰图标则可从辅助技术的阅读顺序中隐藏。无障碍名称不能代替视觉上可见的必要操作说明。
避免只用颜色区分状态。比如选中按钮除颜色外，还可通过边框、图标或文字提示状态。颜色对比度应结合实际背景、文字字号和目标无障碍要求检查；不能仅凭“蓝底白字”就断定任何蓝色都足够清楚。渐变背景尤其要检查文字覆盖区域内对比度较差的部分。
用户的系统可能启用了减少动态效果偏好。对于非必要的动画，可以用 prefers-reduced-motion 减少或移除过渡。按钮示例只使用短暂的位移和颜色过渡，但仍提供了减少动态效果的规则。视觉反馈不必依赖动画，颜色、边框和焦点轮廓同样可以清晰表达状态。
尺寸、触屏与响应式布局
按钮高度和点击区域应结合产品设计、平台习惯和用户群体决定。示例将最小高度设为 44px，这是设计中常见的触控目标参考值，不是 CSS 语法强制值，也不意味着所有情境都必须使用这一尺寸。相邻小按钮过于紧密时，即使单个按钮尺寸看似足够，误触概率仍可能较高；可通过布局间距和更大的点击区域改善体验。
使用 inline-flex 可以方便地让文字、图标垂直居中。min-height 比固定高度更适合文字换行、字体缩放和本地化后的长标签；内边距则给文字留出空间。对于多语言界面，不要假设所有按钮文案长度相同，也不要通过固定宽度把文字截断到无法理解。响应式页面可用 flex-wrap 或网格布局安排按钮，让窄屏上的操作自然换行。
若项目包含大量按钮，可用 CSS 自定义属性统一颜色、圆角和间距。自定义属性本身没有特别的“按钮参数限制”，但每个变量仍需给出合理值，并考虑后续主题覆盖。例如上例把主色定义为 --blue，便于在主题中集中调整。共享样式时仍要检查链接按钮、禁用按钮、危险操作按钮等不同类型，不能只给所有按钮换一个颜色。
禁用状态：CSS 外观不等于禁用功能
原生按钮可以使用 HTML 的 disabled 属性。它会让按钮进入禁用状态，通常也会阻止按钮通过常规方式激活。视觉样式可以用 :disabled 调整，但应同时考虑文字对比度，不要把禁用文字处理得几乎不可读。禁用按钮如果缺少解释，用户也可能不知道为什么无法操作；可在附近说明所需条件。
链接没有原生的 disabled 属性。给链接加上 aria-disabled="true" 主要是向辅助技术传达状态，并不会自动阻止链接导航、点击处理或键盘激活；如果要真正禁用链接行为，必须在应用逻辑中控制交互，并谨慎处理焦点和键盘行为。CSS 的 pointer-events: none 只影响指针事件，不是完整的禁用方案，也不能可靠阻止键盘操作或脚本调用。
同样，单靠 CSS 把按钮变灰并不等于业务操作已被禁止。是否允许提交、删除或支付，必须由应用逻辑验证；服务端也必须独立校验权限、数据和请求状态。前端的 disabled、隐藏按钮、样式切换都不能作为安全边界。用户可以修改浏览器中的页面和脚本，绕过只存在于界面上的限制。
常见错误及处理方式
- 用
div模拟按钮，却没有补齐键盘和语义。
原生button已提供键盘激活和控件语义，除非有充分理由，优先使用原生元素。 - 表单内的普通操作意外触发表单提交。
给非提交用途的按钮写type="button"；真正提交表单的按钮明确使用type="submit"。 - 只设计默认和悬停状态。
同时检查按下、键盘焦点、禁用以及可能存在的选中或加载状态。状态颜色变化不应导致文字和图标消失。 - 删除焦点轮廓，或让轮廓被裁掉。
保留浏览器默认样式，或提供清楚可见的替代方案；检查父容器的裁切和按钮周围空间。 - 把悬停当成触屏交互。
触屏设备没有稳定的悬停操作，关键信息和功能应在默认状态或其他可操作状态中可见。 - 依赖颜色表达唯一状态。
增加文字、形状、边框或图标等线索，并检查实际颜色对比。 - 对整个按钮使用固定高度。
固定高度可能截断放大后的文字或较长的本地化文案。优先考虑最小高度、合适内边距和允许换行的布局。 - 用 CSS 假装完成了业务禁用或安全校验。
样式只改变呈现。交互逻辑、权限检查和服务端验证必须在各自应负责的层实现。
组件化时如何组织样式
当按钮种类增多时，可以把共同属性放入基础类，把差异放入变体类，把状态选择器集中维护。以下片段展示一种简洁结构：
.button {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.65rem 1rem;
border: 1px solid transparent;
border-radius: 0.65rem;
font: inherit;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.button--primary {
color: #fff;
background-color: #1769e0;
}
.button--secondary {
color: #172033;
background-color: #fff;
border-color: #bcc6d4;
}
.button:focus-visible {
outline: 3px solid #ffbf47;
outline-offset: 3px;
}
.button:disabled {
cursor: not-allowed;
box-shadow: none;
}类名如何命名并没有 CSS 语言强制的唯一方案，关键是便于维护、避免与其他组件冲突。若项目使用组件框架，也要确认最终渲染出的原生元素仍符合交互语义，且状态类与 HTML 属性保持一致。例如按钮处于真正禁用状态时，应设置 disabled，而不是只切换一个灰色类名。
上线前检查清单
- 操作使用
button，导航使用带有效地址的a；表单中的按钮类型明确。 - 默认、悬停、按下、焦点和禁用状态均有合理反馈，键盘焦点清楚可见。
- 文本能说明操作，颜色对比在纯色或渐变的实际背景上都可读。
- 窄屏、文字放大、长标签和触屏操作都经过检查。
- 动画尊重减少动态效果偏好，且重要信息不依赖动画或悬停才出现。
- 禁用只用于界面交互提示；权限与业务规则由应用和服务端验证。
- 在项目支持的浏览器中检查渐变、焦点样式及其他 CSS 特性；关键操作有可接受的基础样式回退。
结语
做一个可靠的 CSS3 按钮，不是不断叠加圆角、渐变和阴影，而是先选对 HTML 元素，再用清楚的默认样式和交互状态表达用途。圆角负责形态，渐变和阴影负责视觉层次，悬停与按下负责反馈；它们都不能替代键盘焦点、触屏适配、语义标记和业务验证。把这些边界一起考虑，按钮才能既好看，也能在真实页面里稳定工作。
