“幽灵按钮”（Ghost Button）是一种常见的网页与移动应用 UI 设计模式，指背景透明（或半透明）、仅通过边框（border）和文字（text）定义的按钮，视觉上“若隐若现”，仿佛“幽灵”一般——因此得名。

核心特征：

1. 无填充色（transparent background）
   背景完全透明（或与父容器同色），不遮挡背后内容。
2. 清晰的边框（通常 1–2px 实线）
   如 border: 2px solid #007bff;
3. 高对比度文字（常为主色调或深色）
   文字颜色需确保可读性，如 color: #007bff;
4. 悬停/激活态有明显反馈
   悬停时：常变为实心填充（background: #007bff; color: white;）
   或边框加粗、文字变色、添加轻微阴影等，提升交互感。

示例 CSS（简化版）：

.ghost-btn {
  background: transparent;
  border: 2px solid #007bff;
  color: #007bff;
  padding: 10px 24px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ghost-btn:hover {
  background: #007bff;
  color: white;
}

典型使用场景：

• 主行动号召（Primary CTA）旁的次要操作（例如：“注册”用实心按钮，“了解更多”用幽灵按钮）
• 模态框/卡片底部的操作区（如“取消”、“跳过”）
• 图片叠加层上的轻量级入口（不破坏背景视觉）
• 极简主义或高端品牌界面（营造干净、留白、现代感）

⚠️ 注意事项（设计陷阱）：

小知识：

• 幽灵按钮兴起于 2010 年代中期的「扁平化设计」浪潮（受 iOS 7 / Material Design 影响），是对过度拟物化按钮的反叛。
• 它强调「内容优先」，把视觉焦点留给信息本身，按钮只是低调的服务者。

总结一句话：

幽灵按钮 = 透明背景 + 清晰边框 + 显眼文字 + 强反馈交互 —— 是优雅克制的UI语法，但绝非“隐形按钮”，它的存在必须被用户感知且可操作。

需要我帮你生成一个响应式幽灵按钮组件（含暗色模式支持）或提供 Figma 设计规范建议吗？ 😊

幽灵按钮在中文和英文中还有以下几种常见的称呼：

中文别名：

• 空心按钮：这是最常用的中文别名，非常直观地描述了它只有边框、中间镂空的特点。
• 镂空按钮：在一些前端组件库（如 TDesign）的官方文档中，也会直接将其称为镂空按钮。

英文别名：

• Hollow Button：对应中文的“空心按钮”，在英文语境中也常被使用。
• Empty Button：对应中文的“空按钮”，偶尔也能见到这种说法。
• Outlined Button：对应中文的“线框按钮”或“轮廓按钮”，强调它只有线条轮廓。

 补充一个小知识： 在 UI 设计的实际应用中，幽灵按钮通常被归类为次按钮（Secondary Button）的一种表现形式。它的主要作用是降低视觉干扰，常用于辅助性的操作（比如“取消”、“了解更多”），或者应用在有复杂背景图片的页面上。