幽灵按钮的核心 css 规则是 background: transparent + 显式 border + 高对比 color，hover 时同步切换 background-color 和 color，禁用 pointer-events: none + opacity: 0.5，并需保障无障碍支持与热区可点击性。
幽灵按钮的核心 CSS 规则怎么写
幽灵按钮本质是 background: transparent + 明确边框 + 高对比文字，不是靠 opacity 或 rgba(0,0,0,0.1) 模拟。透明背景必须真实为 transparent，否则在深色背景上会漏底、在浅色背景上又看不清文字。
基础样式示例：
.ghost-btn {
background: transparent;
border: 2px solid #3b82f6;
color: #3b82f6;
padding: 0.5rem 1rem;
font-weight: 500;
transition: all 0.2s ease;
}
.ghost-btn:hover {
background-color: #3b82f6;
color: white;
}
- 别用
border-color: rgba(59, 130, 246, 0.7)—— 半透明边框在深色图上会发灰，对比度崩坏 - 禁用状态必须用
pointer-events: none+opacity: 0.5组合，但不能只靠opacity：屏幕阅读器可能跳过低透明度元素 - 如果按钮放在图片或渐变背景上，
color和border-color必须手动适配，不能复用同一套值
hover 时文字突然消失或变淡的常见原因
这不是动画 bug，而是样式层叠或对比度失效。最典型的是：color 在 :hover 中被意外重置为浅灰，或父容器设置了 opacity 连带影响子元素。
- 检查是否写了类似
.ghost-btn:hover { color: #94a3b8; }—— 这在白色背景上几乎不可读 - 确认没有在按钮外层盒子（比如
.card）上设置opacity，它会让整个按钮树降权，包括文字 - 用浏览器 DevTools 的“Contrast ratio”检查 hover 状态下文字与背景的实际对比度，低于 4.5:1 就不符合 WCAG AA 标准
- 避免用
filter: brightness()控制 hover 效果，它会同时压暗文字和边框，破坏可读性
热区扩大但不模糊的正确做法
用户点击幽灵按钮时经常点不准，直接加 padding 会撑大视觉尺寸；用 transform: scale() 又会在高 DPI 屏幕（如 MacBook Retina、Windows HiDPI）上模糊。
- 用伪元素扩展热区：
.ghost-btn::after设置position: absolute+z-index: -1+ 四边外扩10px - 必须设
z-index: -1，否则伪元素会盖住文字，导致 hover 失效或文字不可选 - 不要给伪元素设
background或border，它只负责扩大点击区域，视觉上完全不可见 - 外扩值建议 ≤ 12px，过大容易误触相邻元素
无障碍支持里最容易被忽略的一点
幽灵按钮没有背景色，屏幕阅读器依赖 role="button" 和键盘焦点样式来识别可交互性。纯 CSS 实现常漏掉这两项。
- HTML 中确保用
<button class="ghost-btn"></button>，而非<a href="#"></a>—— 后者需额外加role="button" tabindex="0" - 必须定义
:focus-visible样式，例如outline: 2px solid #3b82f6; outline-offset: 2px; - 禁用状态除了视觉灰化，还要加
aria-disabled="true"，否则键盘用户仍能 Tab 进去并触发Enter - 如果按钮内含图标（如 SVG），记得加
aria-hidden="true"，避免屏幕阅读器重复读取
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
