什么是按钮？为什么需要统一的术语

在网页与 App 界面里，按钮（Button）是用户触发动作最直接的入口：提交表单、确认删除、切换状态、打开菜单……几乎所有交互都绕不开它。但同一个「按钮」在不同设计系统里叫法不一——主按钮、Primary、CTA、行动点……概念混乱会让设计与开发反复扯皮。

这篇文章把常见的网页按钮按视觉权重与交互行为拆成 13 类，并做成一个可直接点击把玩的「按钮操场」。你可以把下方演示当成一份活的设计规范：看样式、点交互、读源码。

13 种常见按钮一览

下面这张卡片汇集了 13 种常用按钮类型：从主 / 次 / 文字按钮，到幽灵、图标、FAB、开关、分段、下拉、加载、禁用等状态与特殊样式。点击任意按钮，右下角的操作反馈区会实时显示你触发了什么。

按钮操场交互演示
实时预览

怎么选按钮

  • 主按钮（Primary）：一屏只放一个，承载页面最重要的动作，比如「确认提交」。
  • 次按钮（Secondary）：与主按钮搭配，做次要或取消操作。
  • 文字按钮（Text）：最轻量，用于辅助链接式操作，如「了解更多」。
  • 危险按钮（Danger）：删除、退出等不可逆动作，用红色强化警示。
  • 幽灵 / 图标 / FAB：在空间紧张或移动端用图标、浮动按钮替代文字。
  • 开关 / 分段 / 下拉 / 加载 / 禁用：表达状态与交互过程，注意加载与禁用态的反馈。

完整的 HTML / CSS / JS 都附在上方卡片的「源码」标签页里，复制即可复用。