危险按钮必须使用语义化class（如btn-danger）而非内联样式，配合aria-label、禁用状态样式、button元素、focus-visible交互反馈及data-confirm二次确认，确保可访问性、暗色模式兼容与团队协作。
危险按钮必须用语义化 class，不能只靠 background-color
直接写 style="background-color: red" 看似快，但会破坏可访问性、暗色模式兼容性和团队协作维护——红绿色盲用户可能完全看不出“危险”，OLED 屏上红色也可能发灰。真正稳妥的做法是绑定语义化 class，比如 class="btn-danger"，再用 CSS 自定义背景、文字、边框和 focus outline。
常见错误是 JS 拼字符串：button.innerHTML = '<button style="background:red">删除</button>'，结果换主题时全崩；或者用废弃的 <font color="red">，CI 工具会直接报错。
- 必须配
color和border-color，否则在深色背景下文字或边框可能不可见 - 加
aria-label="此操作不可撤销"，让屏幕阅读器能传达风险等级 - 禁用状态（
disabled）也要单独定义样式，避免灰色+红底导致对比度不足
button 元素上设红色，别动 input[type="button"]
<input type="button"> 无法像 <button> 那样可靠控制 padding、vertical-align 和 focus ring，尤其在 Safari 和旧版 Edge 中表现不一致。所有危险操作按钮，一律用 <button type="button"> 或 <button type="submit">，并确保有明确的 type 属性——省略 type 在某些浏览器中默认为 submit，可能意外触发表单提交。
-
<input type="button" value="删除">的文字垂直居中始终不如<button>稳定 -
<button>支持子元素（比如图标 + 文字），<input>只能靠value，没法插<svg> - 若必须用
input（如遗留系统），至少加role="button"和tabindex="0"补齐可访问性
:hover/:active/:focus-visible 样式必须独立定义
仅靠 background-color: #d32f2f 不够。用户悬停、点击、键盘聚焦时反馈要明确且符合 WCAG：hover 状态需提供非颜色差异（比如加粗文字或边框变化），active 状态要有明显压感，focus-visible 必须有足够宽的轮廓线（推荐 outline: 2px solid #c62828）。
立即学习“前端免费学习笔记（深入）”；
别写 button:hover { background: #b71c1c } 就完事——这在键盘操作时无效，且未考虑暗色模式下颜色是否仍可辨识。
- 用
:focus-visible替代:focus，避免鼠标点击后残留难看的虚线 - active 状态建议降低亮度（
filter: brightness(0.9)）而非改颜色，更符合物理反馈直觉 - 移动端需加
@media (hover: none)降级 hover 效果，防止误触发
提示框底部按钮布局容易忽略垂直对齐和间距
把红色按钮放在提示框底部时，常见错误是用 margin-top: auto 或 flex: 1 强推到底部，结果在内容高度变化时按钮“漂”起来，或在小屏上被截断。正确做法是提示框容器设 display: flex; flex-direction: column;，按钮放最后，用 margin-top: auto 仅作用于按钮自身。
同时注意按钮组内横向间距：多个按钮并排时，gap: 8px 比 margin-right 更可靠，不会在最后一个按钮上多出空白。
- 按钮高度统一用
min-height: 36px，避免文字多时撑高变形 - 文字行高设为
line-height: 1.5，比固定像素值更能适配不同字号 - 如果提示框带
padding-bottom，按钮外边距必须抵消它，否则底部留白过大
data-confirm="true" 并配合 JS 拦截——样式再红，用户点下去前没二次确认，就只是个视觉装饰。 
