幽灵按钮应优先选用语义正确的或标签：触发页面内操作用，跳转页面或锚点用带href的；禁用模拟，因其不支持键盘交互且无无障碍识别。

幽灵按钮不是某种 HTML 原生元素，而是用 <button></button> 或 <a></a> 配合 CSS 实现的视觉风格——核心就三条：透明背景、细边框、高对比文字。

幽灵按钮的 HTML 结构怎么选？<button></button> 还是 <a></a>

取决于语义和行为：

• 触发页面内操作（如展开菜单、提交表单）→ 用 <button></button>，天然支持 type="button" 和无障碍焦点
• 跳转到新页面或锚点 → 用 <a></a>，必须带 href 属性（哪怕只是 href="#"，但需配合 JS 阻止默认行为）
• 千万别用 <div> 模拟按钮——它不响应键盘 <code>Enter/Space，也不被屏幕阅读器识别为可交互控件

  CSS 实现幽灵按钮的关键样式写法

  基础样式必须包含这四点，缺一不可：

  • background: transparent —— 确保背景完全透出，别用 rgba(0,0,0,0)，某些旧浏览器渲染异常
  • border: 1px solid #fff —— 边框宽度建议 1–2px，颜色按背景反推（深色背景用白，浅色用黑）
  • color: #fff —— 文字颜色必须与边框同色系，否则悬停时易混淆
  • padding 要足够，避免文字贴边；推荐用 em 或 rem 单位，适配缩放

  示例：

  

  使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

  如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

  下载

  .ghost-btn {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 0.75em 1.5em;
    font-size: 1rem;
    line-height: 1.4;
  }

  悬停效果容易踩的坑：边框抖动、文字偏移、伪类失效

  常见错误现象：:hover 时按钮突然“跳一下”或文字左右晃动。

  • 根本原因是边框出现/消失导致盒模型重排 —— 解决办法：初始化时就写 border: 1px solid transparent，悬停只改 border-color
  • 文字在 transform: scale() 下模糊？加 backface-visibility: hidden 强制硬件加速
  • <a></a> 标签没加 text-decoration: none → 默认下划线破坏幽灵感
  • 移动端点击无反馈？补上 :active { opacity: 0.8; }，iOS Safari 需要 -webkit-tap-highlight-color: transparent

  响应式与无障碍必须检查的细节

  幽灵按钮在小屏或高对比度模式下极易失效：

  • 最小点击区域必须 ≥ 44×44px（iOS）或 48×48px（Android），靠 padding 扩展，别只靠字体大小撑
  • 深色背景 + 白边框 → 在 Windows 高对比模式下可能完全看不见，加 outline 替代方案（如 outline: 2px solid #007aff）
  • 悬停动画别用 transition: all，会意外过渡 outline 或 box-shadow，应明确写 transition: border-color 0.2s, background-color 0.2s
  • 如果按钮含图标（如箭头），用 <svg></svg> 内联，别用 background-image —— 否则高对比模式下图标消失

  真正难的不是画出那个空心框，而是让它在各种设备、各种辅助工具、各种用户操作路径下都稳得住。边框颜色选错、padding 不够、没处理 :focus-visible，任何一个点漏掉，幽灵就真成“看不见的按钮”了。