按钮
Button
别名:按钮按键点击按钮主按钮提交按钮CTA 按钮
这是什么
用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
交互实验室
试一试，再决定怎么用在本地模拟中点击保存，处理中取消，再用键盘重试；比较 21 种风格和四种按钮层级。
正在加载实验室…
使用时关注什么
- 01同一区域通常只有一个最突出的主操作。
- 02处理中的操作应防止重复触发并保留结果反馈。
- 03取消处理中操作后，旧完成回调不能再显示成功；仍可重新尝试。
- 04Enter / Space 与点击触发相同的行为，焦点可见，触控目标不小于 44px。
✓ 适用场景
- 需要用户主动触发一个明确动作（提交、创建、确认）
- 同一区域存在主次多个操作，需要视觉分层
- 操作会改变数据或状态，需要防止误触与重复提交
✕ 不适用场景
- 动作只是导航到另一页，用链接更符合预期
- 操作可逆且频繁切换，用开关或复选框更合适
- 一屏内大量重复的次要操作，弱化为文字按钮避免视觉噪音
常见形式
主要
Primary
实心填充，一屏内主操作唯一
次要
Secondary
描边样式，与主操作并列
幽灵
Ghost
无边框纯文字，弱化视觉重量
危险
Danger
不可逆操作的警示色
实现要点
transitiontransform: scale(0.97)backgroundbox-shadow用 transition 让颜色与阴影平滑变化，按压瞬间加 scale(0.97) 下沉； focus-visible 描边保证键盘可达；加载态将文字替换为 spinner 并 disabled， 保留按钮宽度避免布局跳动。触控目标高度不小于 44px。
平台 API
<button>typerole="button"代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
横向对比
查看完整对比 →相关概念
用户按下按钮、卡片等可点击元素时，元素轻微缩小（通常 0.95～0.98）， 松开后弹回。一个几十毫秒的细节，让界面"手感"立刻从网页变成实体按键。
动效替代方案点击位置向外扩散一圈半透明圆形波纹后消散，把"点中了哪里"可视化。 Material Design 的标志性按压反馈， 让无生命的点击立刻获得物理感——像石头落进水面。
动效搭配使用鼠标靠近按钮时，按钮像被磁铁吸住一样朝光标方向偏移一小段距离， 离开后弹性归位。偏移量按光标与按钮中心的距离计算，通常限制在 8～20px。 一种高"手感"的桌面端彩蛋交互，常出现在作品集与创意官网。
动效搭配使用鼠标悬停时卡片或按钮轻轻上浮（translateY -2～6px）并加深投影， 像被无形的手托起。最常见的"这个可以点"的桌面端暗示， 成本极低但立刻让页面有层次和呼吸感。
动效搭配使用用一个持续旋转的圆环或圆点表示"正在处理"。占用空间极小、语义全球通用， 适合嵌入按钮内、跟随光标或作为局部区块的轻量加载反馈。 它只表达"忙碌"，不表达进度多少，也不预告还剩多久。
动效搭配使用