Ghost button 幽灵按钮
/GOHST BUT-n/ · noun · 操作类模式 · #124
透明的按钮：没有填充色，只有一圈细边框，文字和边框同色，背后的图片或底色能透出来。它常放在实心的主按钮旁边当次要选项（“注册”旁边的“登录”），或者压在首屏大图上。不少设计系统把这种带边框的叫 outline button（线框按钮），把连边框都没有、只在悬停时出现底色的才叫 ghost。
别名：透明按钮。
你可能会这样叫它
- “只有边框的透明按钮”
- “主按钮旁边的线框按钮”
- “大图上透明的按钮”
- “空心按钮”
……它的名字是 幽灵按钮（Ghost button）。
常见问题
幽灵按钮是什么意思？
幽灵按钮（ghost button）是背景透明、只有一圈细边框的按钮，背后的图片或底色能透出来。它常和实心主按钮并排，当次要选项用，比如“注册”旁边的“登录”。因为不显眼，最重要的那个操作不要做成幽灵按钮。
代码里叫什么
| Web (CSS) | background: transparent border: 2px solid currentColor |
|---|---|
| Jetpack Compose | OutlinedButton TextButton |
| Android (Views) | Widget.Material3.Button.OutlinedButton |
| Flutter | OutlinedButton TextButton |
| SwiftUI | 没有线框样式（iOS 上 .bordered 是浅色填充）：用描边的 RoundedRectangle 作为 overlay 叠上去 |
| React (shadcn/ui) | variant="outline" variant="ghost" |
| Carbon | kind="tertiary" kind="ghost" |
复制给 AI 编程工具
在主按钮旁边加一个幽灵按钮：高度、内边距和圆角都和实心按钮一致，背景透明，2px 边框和文字用品牌色，悬停和按下时出现浅色底。它只用于次要操作，不要用在主操作上；放在图片上时，确保文字和背景的对比度至少 4.5:1、边框清楚可见，并保留清晰的焦点框。