必须在:root中定义--btn-bg等按钮变量以实现全局可控，避免组件内局部声明导致:hover无法继承；需配transition精确属性、媒体查询重设及主题前缀命名，IE不支持需降级。
用 :root 定义按钮基础色变量，避免重复写死值
直接在全局作用域定义颜色变量，比在每个按钮类里重复写 #3b82f6 更可控。一旦设计改主色，只改一处就能同步所有悬停效果。
常见错误是把变量塞进具体组件选择器里（比如 .btn { --bg: #3b82f6; }），结果悬停时读不到——因为 :hover 伪类无法继承父级声明的自定义属性，除非变量本身在更上层作用域。
- 推荐做法：在
:root中统一声明--btn-bg、--btn-hover-bg、--btn-text - 如果按钮需支持主题切换，变量名加前缀更安全，比如
--theme-primary - 注意 IE 不支持 CSS 变量，如需兼容，得配 PostCSS 插件降级或另写 fallback
:hover 中直接引用变量，别用 calc() 或冗余计算
悬停样式本质就是替换颜色值，直接赋值最稳。有人习惯写 background-color: color-mix(in srgb, var(--btn-bg) 70%, black);，看似灵活，但浏览器兼容性差（color-mix 仅 Chrome 111+ 支持），且可读性低。
真实场景中，多数按钮悬停是“主色变深”或“换强调色”，提前算好两种状态的值更可靠。
立即学习“前端免费学习笔记（深入）”；
- 正确：
background-color: var(--btn-hover-bg); - 错误：
background-color: darken(var(--btn-bg), 10%);（Sass 函数不能在纯 CSS 里用） - 若需动态变暗，可用
color-mix或hsl()转换，但必须确认目标浏览器支持
用 transition 配合变量实现平滑过渡，别漏写属性名
只写 transition: all .2s 看似省事，但会触发重排重绘，尤其当按钮含阴影或边框时，性能抖动明显。CSS 变量本身不触发重绘，但依赖它的属性（如 background-color）会。
- 精准写法：
transition: background-color .2s, color .2s; - 别漏掉单位——
.2s不能写成.2，否则整个声明失效 - 如果按钮有
box-shadow悬停变化，也得显式加入 transition 列表
响应式按钮中变量要分断点覆盖，别指望媒体查询自动继承
移动端按钮常需更大点击区域或不同悬停反馈，这时不能只靠一个 --btn-hover-bg。媒体查询里重新赋值变量，才能让 :hover 自动生效。
容易被忽略的是：变量作用域仍以声明位置为准。在 @media (max-width: 768px) 里给 :root 赋新值，所有子元素都能立刻读到，包括已渲染的按钮。
- 示例：
@media (max-width: 768px) { :root { --btn-hover-bg: #2563eb; } } - 不要在按钮类内部写媒体查询再设变量，那样
:hover读不到 - 测试时记得真机触发 hover——手机端实际无 hover，得配合
@media (hover: hover)做条件判断
