悬浮按钮
Floating Action Button
别名:悬浮按钮浮动按钮悬浮球右下角那个圆按钮FABfloating action button
这是什么
锚在视口角落、悬浮于内容之上的圆形按钮，承载当前页面唯一的主操作（新建、撰写、扫码）。 用阴影和位置宣告「我在所有内容之上」，比行内主按钮更醒目，但一屏只应有一个。点击后可展开 为带标签的扩展形态，或扇出一组快捷动作。
名词辨析
悬浮按钮不是「更显眼的主按钮」：主按钮嵌在页面布局里、随内容滚动；悬浮按钮脱离文档流、 常驻视口角落并覆盖在内容之上。判断标准是它是否悬浮在滚动内容之上，而不是颜色有多亮。
交互实验室
试一试，再决定怎么用点击右下角悬浮按钮，展开子动作后再收起，观察它与内容的层级关系。
正在加载实验室…
使用时关注什么
- 01按钮悬浮于滚动内容之上且不被遮挡
- 02扇出的子动作均可键盘到达
✓ 适用场景
- 页面有唯一、高频、正向的主操作（新建、撰写）
- 底部拇指热区需要常驻入口
- 工具型界面需要比行内按钮更强的操作召唤
✕ 不适用场景
- 有多个并列主操作（并列会互相削弱，用底部操作条）
- 操作是破坏性的（删除、清空）
- 会遮挡关键内容或底部导航
常见形式
单一圆形
Single
纯图标圆形按钮，最常见形态
扩展标签
Extended
图标 + 文字标签，行动意图更明确
快捷扇出
Speed dial
点击扇出多个子动作，再点收起
实现要点
position: fixedborder-radiusbox-shadowtransformtransitionposition: fixed（或 absolute 于滚动容器外）锚定角落，圆形用 border-radius: 9999px； 抬升靠 box-shadow 多层阴影而非描边。扇出的子动作用 scale + opacity 依次错开出现， 主按钮旋转 45° 变关闭。按压 scale(0.94) 反馈；触控目标不小于 48px；尊重 prefers-reduced-motion。
平台 API
<button>positionbox-shadowaria-expanded代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。