按钮操作
它是一个可以按下的界面元素,按下后会立即执行一项明确的操作。
- 点一下就执行事情的方块
- 写着确定保存的那个东西
- 按下去会有反应的地方
- 操作按钮
- 点击按钮
- 提交按钮
示例
(无)
默认
#7C7CF8
:hover
鼠标悬停仅指针
底色亮一档
:active
按下的那一刻
底色暗一档,下移 1px
:focus-visible
键盘选中仅键盘
外面套一圈光环
:disabled
不可用
灰底灰字,点不动
aria-busy
处理中
文字改写,加一个转圈
带「仅指针」的状态需要鼠标或触控板:触屏设备上没有悬停这一说,直接就是按下。
带「仅键盘」的状态通常要用 Tab 键走到才出现,鼠标点击一般不显示。
Web / iOS / Android 对照
Web原生支持
桌面与移动端现代浏览器
Button
<button>
iOS原生支持
iOS / iPadOS
Button
SwiftUI: Button|UIKit: UIButton
Android原生支持
Android 手机 / 平板
Button
Compose Material 3: Button
使用规范
什么时候用
- 触发保存、提交、继续或删除等用户主动发起的操作
什么时候别用
- 只是跳到另一个地址时不要伪装成按钮,应使用链接
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。