幽灵按钮是无填充、有描边、文字可读、悬停反色的交互元素，核心在于显式设置border与color并同步切换hover态背景与文字色，确保各场景下清晰可见且点击可靠。
什么是CSS幽灵按钮？它不是透明背景那么简单
幽灵按钮（Ghost Button）本质是「无填充、有描边、文字可读、悬停反色」的交互元素，不是单纯把 background 设为 transparent 就完事。常见错误是只改背景，结果在浅色页面上文字看不见，或悬停时没对比度，用户根本点不到。
关键判断标准：默认状态下，按钮文字必须清晰可辨；悬停时，视觉反馈要足够强（比如背景反填 + 文字变色），否则就是失败的幽灵按钮。
怎么写一个真正可用的幽灵按钮？从 border 和 color 入手
核心是控制三组属性：描边、文字色、悬停态反向逻辑。不能依赖背景色过渡，因为幽灵按钮默认背景就是透明的。
-
border必须显式设置（如2px solid #3b82f6），不能靠outline或box-shadow模拟，否则不支持圆角裁剪且打印/高对比模式下失效 - 默认
color要和border-color一致或相近，确保文字与描边形成统一视觉重量 - 悬停时必须同时切换
background-color和color，例如：background-color: #3b82f6+color: white - 记得加
transition: all 0.2s ease，但避免对background单独过渡——透明到实色会闪，统一用all更稳
button.ghost {
background: transparent;
border: 2px solid #3b82f6;
color: #3b82f6;
padding: 0.5rem 1rem;
transition: all 0.2s ease;
}
button.ghost:hover {
background-color: #3b82f6;
color: white;
}
为什么 hover 时文字消失？检查 contrast 和 pointer-events
典型现象：按钮在白色背景上正常，放到浅灰图或 banner 上就看不清文字；或者鼠标移上去瞬间文字变淡甚至透明——这通常是 color 值被重置、或父容器用了 opacity 连带影响子元素。
- 别用
opacity: 0.8控制按钮整体透明度，它会让文字和边框一起变淡，破坏可读性；改用rgba()控制border-color或color的 alpha 通道 - 检查是否误加了
pointer-events: none在父层，幽灵按钮常被套在div或a里，一不留神就禁用了点击 - 深色模式下，如果没用
@media (prefers-color-scheme: dark)重置颜色，#3b82f6描边在黑背景上会极淡，必须补配色
移动端点击区域太小？padding 和 min-width 是硬指标
幽灵按钮没有背景填充，纯靠描边和文字定义边界，iOS 和 Android 都会把点击热区压缩得很窄，导致“看着能点、实际点不中”。
- 必须设
padding（至少0.5rem），不能只靠line-height或font-size假装有空间 - 加
min-width: 120px（或根据设计定），防止文字过短时按钮塌缩成一条线 - 移动端慎用
border-radius: 9999px，部分安卓 WebView 渲染异常，建议用border-radius: 8px或明确值 - 真机测试时重点看 Safari —— 它对
transparent背景 +border的抗锯齿处理最差，边缘容易发虚，可加backface-visibility: hidden强制硬件加速修复
幽灵按钮最难的不是写出来，而是让它在各种背景、各种系统、各种交互状态下都“稳稳地被看见、被点中”。颜色值、描边粗细、padding 下限、hover 反转逻辑，四个变量少调一个，体验就掉一档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
