按钮禁用态应使用rgba降低原色不透明度（0.4–0.5），而非固定灰色，以保持色相识别、品牌一致性和无障碍可访问性；需同步调整文字色、边框色并移除悬停/焦点样式。
按钮禁用态（disabled）的颜色，不建议直接用灰色（如 #999 或 #ccc）一刀切，而应基于原按钮色，用 rgba() 降低不透明度，既保持色彩一致性，又符合视觉层次逻辑。
为什么用 rgba 而不是固定灰度？
固定灰色会割裂品牌色体系，尤其在深色模式、高对比度场景或彩色按钮（如绿色提交、红色删除）下，纯灰显得突兀且语义弱。用 rgba(原色R, 原色G, 原色B, 0.4–0.5) 可保留色相特征，让用户一眼识别“这是那个按钮，只是不能点”，提升可理解性与无障碍体验。
推荐的透明度范围：0.4–0.5
实测中：
- 0.3 太淡，易被忽略，对比度可能不达标（尤其浅底）
- 0.4–0.5 平衡辨识度与禁用感，WCAG AA 级文本对比度通常仍可接受
- 0.6 以上禁用感不足，用户可能误点
写法示例（兼顾可维护性）
避免硬编码 rgba 值，推荐 CSS 自定义属性 + calc() 或预处理器变量：
立即学习“前端免费学习笔记（深入）”；
.btn {
--btn-bg: #4285f4;
background-color: var(--btn-bg);
}
.btn:disabled {
background-color: rgba(66, 133, 244, 0.4);
cursor: not-allowed;
box-shadow: none;
}
若用 Sass/Less，可封装函数：@function disabled-color($color, $alpha: 0.4) { @return rgba($color, $alpha); }
别忘了同步处理文字和边框
仅改背景不够，文字色和边框也需协调：
- 文字色：用同源色的 rgba，如
rgba(255, 255, 255, 0.6)（白字按钮）或rgba(0, 0, 0, 0.5)（黑字按钮） - 边框色：设为
transparent或与背景一致的 rgba，避免禁用态出现“灰边框+亮背景”的割裂感 - 移除悬停/焦点样式：确保
:disabled下:hover、:focus不生效
