最可靠方式是用独立class区分按钮颜色，如btn-primary、btn-danger；避免id和内联style，因class可复用、支持伪类且利于维护；固定定位与z-index需统一管控，hover/active及深色模式均须显式适配。
用 class 区分按钮，别用 id 或内联 style
想让底部固定悬浮条里的多个按钮各自有不同颜色，最可靠的方式是给每个按钮加独立的 class，比如 class="btn-primary"、class="btn-danger"、class="btn-success"。不要用 id 写样式（维护困难），也别在每个 button 标签里写 style="background-color: ..."（后期改色要逐个找，易漏）。
原因很简单：CSS 类可复用、可组合、可继承，且支持伪类（如 :hover）；而内联样式优先级太高，会覆盖后续 CSS 调试逻辑，一旦页面变复杂，样式冲突就很难定位。
固定定位 + z-index 必须统一管控
所有按钮都要共享同一套定位规则，否则容易错位或层级混乱。推荐把公共定位抽成一个基础类：
.floating-bar button { position: fixed; bottom: 16px; z-index: 1000; }
立即学习“前端免费学习笔记（深入）”；
再让每个按钮类只负责颜色和微调尺寸，例如：
.btn-primary { background-color: #007bff; color: white; }.btn-delete { background-color: #dc3545; color: white; }.btn-help { background-color: #6c757d; color: #fff; }
注意：z-index 值必须设在按钮本身（或其父容器），不能只靠 class 颜色定义；如果悬浮条里还有图标、文字说明等其他元素，它们的 z-index 也要比按钮小，否则会遮挡点击区域。
hover 和 active 状态别漏掉，移动端要额外处理
不同颜色的按钮，悬停和点击反馈也该有差异，否则用户无法感知交互状态。每个按钮类都应配齐：
.btn-primary:hover { background-color: #0056b3; }.btn-delete:hover { background-color: #c82333; }
但要注意：:hover 在触摸设备上基本不触发（iOS/Android 默认忽略），所以如果你的悬浮条要兼容手机端，得加一层 :active 降级：
.btn-primary:active, .btn-primary:focus { opacity: 0.8; }
更稳妥的做法是监听 touchstart 用 JS 切换临时 class，但多数场景下用 :active + opacity 已足够。
深色模式下颜色可能翻车，提前做适配
很多用户开了系统级深色模式，而你的按钮色值（比如 #ffffff）在深背景上会隐形。别指望浏览器自动适配——background-color 不响应 @media (prefers-color-scheme: dark) 自动反转。
必须显式写媒体查询：
@media (prefers-color-scheme: dark) {<br>
.btn-primary { background-color: #0d6efd; }<br>
.btn-delete { background-color: #d63384; }<br>
}
更关键的是：别用纯黑（#000000）或纯白（#ffffff）做按钮底色，它们在深/浅模式切换时极易失去对比度。选带灰阶的中间值，比如 #28a745 比 #00ff00 更稳。
