幽灵按钮的本质是 border + transparent background，即仅用边框和完全透明背景实现透底效果，依赖文字与边框同色、足够对比度及合理 padding，hover 和 disabled 状态需遵循轮廓强化与可访问性原则。
幽灵按钮的本质是 border + transparent background
幽灵按钮（Ghost Button）不是靠 CSS 框架生成的特殊组件，而是用极简的 border 和完全透明的 background 构成的视觉效果。它依赖文字颜色和边框颜色形成对比，背景透出父容器，所以“幽灵”感来自上下文，而非按钮自身有样式堆砌。
常见错误是给 background 设为 white 或 rgba(255,255,255,0.1) —— 这就不是幽灵按钮了，是半遮罩按钮，会破坏透底逻辑。
- 必须设
background: transparent（不能省略，某些浏览器默认有背景） - 边框建议用
border: 2px solid currentColor，让边框自动跟随文字色，避免配色脱节 - 文字颜色需与父容器背景有足够对比度，否则看不见边框也看不见字
- 加
padding但别太小，0.75em 1.5em是较安全的起始值
hover 状态必须改变 border 或 color，不能只改 background
因为初始状态 background 是 transparent，hover 时如果只加 background: #007bff，就彻底变成实心按钮，失去幽灵特性。真正符合设计意图的做法是强化轮廓或文字本身。
典型可行方案：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
hover { border-color: #007bff; color: #007bff; }—— 最常用，简洁且可访问性好 -
hover { border-width: 3px; }—— 需配合box-sizing: border-box，否则会引发布局偏移 - 避免
hover { background: rgba(0,123,255,0.1) }：微弱遮罩会模糊边缘，且在深色背景上可能完全不可见
移动端点击区域小？用伪元素扩大热区但不破坏视觉
纯线框按钮在手机上容易点不准，直接加大 padding 会让边框显得松散、比例失调。更稳妥的方式是用 ::after 伪元素扩展点击范围，同时保持视觉尺寸不变。
.ghost-btn {
position: relative;
padding: 0.75em 1.5em;
}
.ghost-btn::after {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
z-index: -1;
}
这样热区向外扩展了 10px，但用户看到的仍是原始大小的边框。注意 z-index: -1 必须设置，否则伪元素会盖住文字；也别用 transform: scale() 模拟，会导致高 DPI 屏幕下模糊。
禁用状态（disabled）不能只靠 opacity
设 opacity: 0.5 看似合理，但会降低可访问性：屏幕阅读器可能忽略低透明度内容，且键盘焦点仍能进入。真正的禁用需同步处理三件事：
- 加
pointer-events: none阻断所有鼠标交互 - 显式设
opacity: 0.4+cursor: not-allowed - 关键：把
border-color和color都设为同一低饱和度灰，比如#999，避免出现“边框比文字亮”的割裂感 - 若用
<button disabled>，记得在 CSS 中写button:disabled而非button[disabled]，后者不覆盖所有禁用场景
幽灵按钮的脆弱性恰恰在于它什么都没“做”，全靠上下文支撑。一旦父容器背景动态变化（比如渐变、图片、视频），或者嵌套在卡片阴影里，边框就可能瞬间消失——这不是代码错了，是设计没预留容错空间。
