幽灵按钮失效主因是颜色对比度不足或禁用状态处理不当，而非动画错误；需确保各背景下的可读性、可点性与可访问性，正确处理opacity、hover颜色重置、transition属性限制、disabled语义及热区扩展。
button.ghost 的核心不是“怎么画边框”，而是“怎么让按钮在各种背景上都可读、可点、可访问”。
幽灵按钮失效的常见原因，90% 出现在颜色对比度不足或禁用状态处理不当，而不是动画没写对。
为什么 hover 时文字突然看不见了？
典型现象：按钮在纯白背景上正常，放到浅灰图或 banner 上就发虚；或者鼠标移上去瞬间文字变淡甚至消失。
-
color值被父级opacity连带影响——别给容器设opacity，改用background-color: rgba()控制透明度 - hover 后
color没显式重置，比如从#3b82f6变成white，但背景恰好也是浅色，对比度低于 WCAG 4.5:1 - 用了
transition: all却没限制属性，导致color和border-color过渡不同步，视觉上像“闪退”
disabled 状态不能只靠 opacity
设 opacity: 0.5 表面看起来合理，但会触发两个实际问题：
- 屏幕阅读器可能跳过该元素（尤其当
opacity < 0.7时，部分 AT 工具判定为不可交互） - 键盘焦点仍能进入，但用户看不到反馈，违反可访问性基本要求
正确做法是：pointer-events: none + 显式 color 和 border-color 降饱和度（如从 #3b82f6 改为 #94a3b8），同时保留 tabindex="-1" 阻止键盘聚焦。
热区扩大必须用 ::after 伪元素，别用 transform: scale()
用户点击体验差，往往不是按钮太小，而是热区没扩展。
立即学习“前端免费学习笔记（深入）”；
- 用
::after绝对定位扩出 10px 边距，同时设z-index: -1，确保不遮文字 - 禁用
transform: scale()模拟——高 DPI 屏幕下会模糊，且缩放后文字渲染质量下降 - 扩出来的区域不要影响相邻元素布局，所以必须脱离文档流（
position: absolute）
