按钮颜色由CSS控制，HTML5仅提供结构；需通过CSS的color、background-color、border-color属性修改，并注意:hover/:focus/:disabled状态及CSS变量统一管理。
按钮颜色由 CSS 控制，不是 HTML5 本身的属性
HTML5 只提供 标签结构，颜色完全依赖 CSS。改色必须定位到对应按钮的 CSS 规则，而不是改 HTML 标签里的内容。
- 常见错误：在
标签里加color="red"—— 这个属性根本不存在，浏览器会忽略 - 真正起效的是
color（文字色）、background-color（背景色）、border-color（边框色）这三个 CSS 属性 - 模板中按钮样式通常来自外部 CSS 文件（如
style.css）或块，优先检查这些位置
如何快速定位并修改按钮的 CSS 规则
用浏览器开发者工具（F12）右键点击按钮 → “检查”，看右侧“Styles”面板里激活的规则。重点关注：
- 是否用了类名（如
class="btn-primary"），样式大概率在.btn-primary规则里 - 是否有 ID（如
id="submit-btn"），对应#submit-btn规则 - 是否被更具体的规则覆盖（比如
header .cta-button比单独的.cta-button优先级高）
直接在开发者工具里临时修改 background-color 值（例如改成 #4a90e2），确认效果后再写入正式 CSS 文件。
修改时要注意 hover / disabled 状态
只改默认状态不够，用户交互时颜色会变回原样。必须同步更新伪类规则：
立即学习“前端免费学习笔记（深入）”；
-
:hover—— 鼠标悬停时的背景和文字色 -
:focus—— 键盘聚焦（可访问性必需） -
:disabled—— 按钮禁用时的灰度表现
button.my-btn {
background-color: #28a745;
color: white;
}
button.my-btn:hover {
background-color: #218838;
color: white;
}
button.my-btn:disabled {
background-color: #6c757d;
color: #e9ecef;
}
使用 CSS 变量统一管理颜色更安全
如果模板已用 CSS 变量（比如 --primary-color），直接改变量值比逐个找按钮更高效，也避免漏改：
:root {
--primary-color: #007bff;
--primary-hover: #0056b3;
}
button.btn-primary {
background-color: var(--primary-color);
}
button.btn-primary:hover {
background-color: var(--primary-hover);
}
改色只需调整 :root 下的变量值，整个站点所有引用该变量的按钮都会同步更新。但注意：很多老模板没用变量，得手动补上或直接覆盖。
最常被忽略的是 border 和 box-shadow —— 它们可能盖住新设的背景色，导致颜色看起来“没生效”。检查并清空或重设这些属性才能让颜色准确呈现。
