直接用 style 属性设置 background-color 是最快且兼容性好的按钮变色方式，需避免 bgcolor 等错误写法；多按钮应使用 class 统一管理，并显式定义 hover、active、focus 状态以确保交互一致性与可访问性。
直接用 style 属性改 background-color 最快
想立刻让按钮变色，style 里写 background-color 是最直白的方式，不用额外 CSS 文件或类名。浏览器兼容性好，所有现代浏览器都支持，连 IE9+ 都没问题。
常见错误是写成 bgcolor（这是老式 HTML 属性，对 <button> 无效）或者漏掉单位（比如写 background-color: #ff0000 没问题，但写 background-color: red 也行，不过别写 background-color: ff0000——少个 # 就失效）。
<button style="background-color: #4CAF50;">绿色按钮</button><button style="background-color: rgb(76, 175, 80);">等效写法</button>- 避免写
style="bgcolor:#4CAF50"或style="background:#4CAF50"（缺少-color，部分浏览器可能忽略）
用 class 配合 CSS 更适合多按钮统一管理
如果页面有多个按钮要配同一套配色方案，硬编码每个 style 很难维护。这时候定义一个 class，在 <style> 或外部 CSS 里集中控制更稳妥。
注意：CSS 中的 background-color 会覆盖内联 style，除非加 !important（不推荐）。另外，按钮默认有边框和内边距，纯色背景容易显得“贴边”，建议同步调 padding 和 border。
立即学习“前端免费学习笔记（深入）”；
<button class="btn-primary">主按钮</button><style> .btn-primary { background-color: #2196F3; padding: 8px 16px; border: none; } </style>- 别忘了禁用默认边框：
border: none，否则颜色会被灰色边框割裂
hover 和 active 状态必须单独设置才不会“失色”
用户鼠标悬停或点击时，按钮默认会触发浏览器内置样式（比如 Chrome 会给 button 加一层浅灰背景），导致你设的 background-color 看不见。必须显式定义 :hover 和 :active 才能保持视觉一致。
容易被忽略的是 :active——点击瞬间的反馈，没设的话用户会觉得按钮“没按下去”。另外，别只写 :hover 而忽略 :focus，这对键盘操作用户很重要。
<style> .btn-primary { background-color: #2196F3; } .btn-primary:hover { background-color: #0b7dda; } .btn-primary:active { background-color: #0a69b9; } .btn-primary:focus { outline: 2px solid #2196F3; outline-offset: 2px; } </style>- 色值建议用比原色深 10%–20% 的变体，避免对比度过低看不清
- 别用
transition过渡太慢（如0.3s以上），影响操作节奏
色值选不好会让按钮“看不见”或“刺眼”
纯黑（#000000）或纯白（#FFFFFF）作按钮背景，文字对比度往往不达标，尤其搭配默认黑色文字时，可访问性（WCAG）会出问题。工具如 WebAIM 对比度检查器 可验证。
实用建议：主色优先选中等饱和度的蓝色、绿色；避免荧光色或高饱和红（易视觉疲劳）；深色背景上慎用深蓝/深紫（文字难辨）。
- 安全可用的起手色值：
#007BFF（Bootstrap 主蓝）、#28A745（成功绿）、#DC3545（危险红） - 禁用色例：
#FF0000（太刺眼）、#333333（文字若为#000000，对比度仅 3.8:1，低于 WCAG AA 标准 4.5:1） - 深色模式下，别直接复用浅色模式色值——
#FFFFFF在黑底上反而过曝，改用#E0E0E0更柔和
