按钮是网页中触发操作的核心元素，但浏览器默认按钮的外观通常比较简陋，和现代设计风格很难融合。要修改CSS按钮样式，需要从盒模型、颜色、边框、状态反馈和动效等多个维度入手。本文会围绕实际开发中常见的按钮定制需求，给出可以直接使用的代码示例和设计建议，帮助你摆脱默认样式，做出统一且好用的按钮。
一、从默认样式到基础改造：掌握按钮的核心属性
在大多数浏览器中，<button>元素默认带有灰色渐变、边框和圆角，不同浏览器的表现也有差异。要统一外观，第一步是清除浏览器默认样式，并重新定义按钮的盒模型。常用的做法包括设置 display: inline-block 或 flex，显式声明内边距、字体和边框。
/* 重置基础按钮样式 */
.btn {
display: inline-block;
padding: 10px 24px;
font-size: 16px;
font-family: inherit;
color: #ffffff;
background-color: #007bff;
border: 1px solid #007bff;
border-radius: 6px;
cursor: pointer;
text-align: center;
text-decoration: none;
box-sizing: border-box;
}
上面的代码中，padding 决定按钮内部的留白，数值越大点击区域越宽敞；border-radius 控制圆角大小，设为 50% 可以生成胶囊形按钮；cursor: pointer 让鼠标移上去显示手型，暗示可点击。box-sizing: border-box 很重要，它能保证内边距和边框包含在总宽高内，避免布局错位。
如果按钮需要作为链接使用，可以把样式应用在 <a> 元素上。但要注意，链接默认的 text-decoration 需要关闭，并且要补充 role="button" 或直接使用 <button> 以保持语义正确。对于纯图标按钮，还需要额外设置宽高一致，并通过 line-height 或 flex 让内容居中。
二、利用伪类和过渡让按钮“活”起来
静态按钮虽然能表达功能，但缺少操作反馈会让界面显得死板。CSS 伪类可以在不同交互状态下改变样式，通常配合 :hover、:active 和 :focus-visible 来实现。其中 :hover 响应用鼠标悬停，:active 表示鼠标按下的瞬间，而 :focus-visible 只在键盘导航时显示轮廓，既能保证可访问性，又不会干扰鼠标用户的视觉。
/* 状态反馈样式 */
.btn:hover {
background-color: #0056b3;
border-color: #0056b3;
}
.btn:active {
background-color: #004085;
border-color: #004085;
transform: translateY(1px);
}
.btn:focus-visible {
outline: 2px solid #80bdff;
outline-offset: 2px;
}
除了直接切换颜色，加入 transition 能让变化过程更平滑。推荐使用 transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;，而不是直接写 transition: all。指定具体属性可以减少浏览器不必要的计算，也能避免将来修改其他属性时出现意外动画。对于 transform 的微小位移，可以模拟按压效果，手感更真实。
需要注意的是，:focus 在鼠标点击后也会触发，可能留下焦点框。现代浏览器中，更推荐使用 :focus-visible 来只在键盘操作时显示焦点样式。如果必须兼容旧版浏览器，可以先用 :focus 做基础样式，再用 :focus:not(:focus-visible) 覆盖掉鼠标点击后的焦点轮廓。
三、进阶技巧：渐变、阴影与按钮组设计
单一颜色按钮容易显得单调，使用 CSS 渐变和阴影可以快速提升质感。例如通过 linear-gradient 创建从上到下的颜色过渡，再用 box-shadow 添加细腻的外阴影和内阴影。这样的按钮在浅色背景上会有轻微的立体感，按下时还能通过减少阴影来模拟真实按压。
/* 渐变与阴影按钮 */
.btn-gradient {
background-image: linear-gradient(180deg, #6c8cff 0%, #4a6cf7 100%);
border: none;
box-shadow: 0 4px 10px rgba(74, 108, 247, 0.35);
}
.btn-gradient:hover {
background-image: linear-gradient(180deg, #5a7dff 0%, #3b5de0 100%);
box-shadow: 0 6px 14px rgba(74, 108, 247, 0.45);
}
.btn-gradient:active {
box-shadow: 0 2px 5px rgba(74, 108, 247, 0.35);
transform: translateY(2px);
}
当多个按钮并排出现时，可以组成按钮组。按钮组通常需要处理相邻边框重叠的问题，常见做法是让非首位的按钮左边框取消或使用负外边距。另一种方式是用 display: flex 包裹，再给按钮设置 border-radius: 0，只保留首尾圆角。这样视觉上更紧凑，适合工具条或分页场景。
/* 按钮组基础结构 */
.btn-group {
display: inline-flex;
}
.btn-group .btn {
border-radius: 0;
margin-left: -1px;
}
.btn-group .btn:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
margin-left: 0;
}
.btn-group .btn:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
按钮组的 HTML 结构可以使用多个 <button> 元素并排，外层容器加上 role="group"。如果按钮数量较多，还可以结合 aria-label 描述组的用途。在处理圆角时务必注意首个和末个按钮的定位，避免出现中间按钮圆角突兀的问题。
四、响应式与可访问性：让按钮在各种场景都可靠
按钮不仅要在桌面端好看，在移动端也要容易点击。触控目标的最小尺寸一般建议不低于 44px 乘 44px，否则用户手指难以准确命中。可以通过 min-height 和 min-width 来保证点击区域，同时使用 @media 在小屏幕下调整内边距和字体大小。
/* 响应式按钮尺寸 */
.btn {
min-height: 44px;
min-width: 88px;
}
@media (max-width: 600px) {
.btn {
width: 100%;
padding-left: 12px;
padding-right: 12px;
font-size: 15px;
}
}
可访问性方面，按钮的禁用状态不能只用颜色变灰来表示，因为色弱用户可能无法分辨。推荐同时使用 :disabled 伪类和 aria-disabled="true"，并配合文字提示。禁用按钮应该降低不透明度，但不要完全隐藏边框，保持布局稳定。对于关键操作，还要确保文字与背景的对比度达到 WCAG 标准，通常要求普通文本至少 4.5:1。
/* 禁用状态 */
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}
最后别忘了测试键盘操作。通过 Tab 键应能聚焦到每个按钮，并且焦点轮廓清晰可见。使用屏幕阅读器时，按钮的文本应准确描述动作，避免只写“点击这里”。如果按钮只包含图标，务必用 aria-label 提供替代文本。掌握这些细节，按钮样式修改才真正从外观延伸到体验层面。