本文档详细介绍了Semantic UI中的按钮元素，这是一个允许用户触发操作的基础UI组件。它涵盖了按钮的结构、状态、变体和自定义选项。有关按钮相关组件（如按钮组）的信息，请参阅核心UI组件。
按钮元素是提供用于触发操作的可点击界面的关键UI组件。Semantic UI以一致的样式、状态和众多变体来实现按钮，以适应不同的设计需求。
来源： src/definitions/elements/button.less20-57 src/themes/default/elements/button.variables8-70
按钮元素由.ui.button类定义，具有以下关键属性
来源： src/definitions/elements/button.less24-57 src/themes/default/elements/button.variables9-16
一个基本的按钮可以用最少的标记来实现
要创建一个带有图标的更复杂的按钮
按钮有几种状态可以为用户提供视觉反馈
| 状态管理 | CSS 类 | 描述 | 关键属性 |
|---|---|---|---|
| 默认 | .ui.button | 正常外观 | 背景： #E0E1E2，颜色： rgba(0, 0, 0, 0.6) |
| 悬停 | .ui.button:hover | 鼠标悬停在按钮上时 | 背景： #CACBCD |
| 重点 | .ui.button:focus | 按钮获得焦点时 | 背景： #CACBCD |
| 激活 | .ui.active.button | 按下状态 | 背景： #C0C1C2 |
| 已禁用 | .ui.disabled.button | 无法交互 | 不透明度： 0.45，指针事件： none |
| 加载 | .ui.loading.button | 显示加载动画 | 光标： 默认，颜色： 透明 |
来源： src/definitions/elements/button.less60-210 src/themes/default/elements/button.variables86-132
加载状态使用CSS动画创建旋转加载效果
来源： src/definitions/elements/button.less130-187 src/themes/default/elements/button.variables86-132
Semantic UI提供了几种特殊的按钮类型
动画按钮在悬停时使用过渡来显示内容
来源： src/definitions/elements/button.less225-326
带标签的按钮将按钮与标签组合成一个组件
来源： src/definitions/elements/button.less378-428
图标按钮强调图标
来源： src/definitions/elements/button.less580-599 src/definitions/elements/button.less684-698
在各种布局中结合标签和图标
来源： src/definitions/elements/button.less819-867
社交媒体平台的预制按钮
社交按钮类型包括
来源： src/definitions/elements/button.less430-579
Semantic UI提供语义化和非语义化的颜色变体
| 语义化颜色 | 非语义化颜色 |
|---|---|
| 主要 | 红光 |
| Secondary (次要) | Orange (橙色) |
| 正例 | Yellow (黄色) |
| Negative (负面) | Olive (橄榄色) |
| 绿光 | |
| Teal (青色) | |
| 蓝光 | |
| Violet (紫罗兰色) | |
| Purple (紫色) | |
| Pink (粉色) | |
| Brown (棕色) | |
| Grey (灰色) | |
| Black (黑色) |
来源： src/themes/default/elements/button.variables258-317 src/themes/default/globals/site.variables222-249
按钮尺寸范围从迷你到超大
| 尺寸类别 | 字体大小 |
|---|---|
.ui.mini.button | 0.78571429rem |
.ui.tiny.button | 0.85714286rem |
.ui.small.button | 0.92857143rem |
.ui.button (默认) | 1rem |
.ui.large.button | 1.14285714rem |
.ui.big.button | 1.28571429rem |
.ui.huge.button | 1.42857143rem |
.ui.massive.button | 1.71428571rem |
来源： src/definitions/elements/button.less642-683 src/themes/default/globals/site.variables105-117 src/themes/default/globals/site.variables393-420
基本按钮具有更简单的样式，只有边框和文本
来源： src/definitions/elements/button.less704-762 src/themes/default/elements/button.variables195-231
反转按钮专为深色背景设计
来源： src/definitions/elements/button.less332-375 src/themes/default/elements/button.variables188-193
来源： src/definitions/elements/button.less600-931
可以使用.ui.buttons类将按钮分组在一起
来源: src/definitions/elements/button.less76-85 src/themes/default/elements/button.variables72-80
在菜单中使用时，按钮会获得特殊的定位
来源: src/definitions/collections/menu.less143-150 src/themes/default/collections/menu.variables98-102
按钮可以通过 Semantic UI 的主题系统高度定制。关键变量定义在
src/themes/default/elements/button.variables
重要的自定义变量包括
| 类别 | 关键变量 |
|---|---|
| 核心外观 | @backgroundColor, @textColor, @fontWeight |
| 尺寸和内边距 | @verticalPadding, @horizontalPadding |
| 边框和圆角 | @borderRadius, @boxShadow |
| 状态 | @hoverBackgroundColor, @focusBackgroundColor, @activeBackgroundColor |
| 动画 | @transition, @animationDuration |
自定义按钮颜色的示例
来源: src/themes/default/elements/button.variables8-362 src/themes/default/globals/site.variables53-58
按钮元素通过清晰的 CSS 结构实现，该结构处理
.ui.button 实现基础样式CSS 特异性经过仔细管理，以确保样式能够正确级联。
来源: src/definitions/elements/button.less20-957
.ui.buttons 类将相关按钮组合在一起按钮元素使用标准的 CSS 属性，并在需要时应用适当的浏览器前缀。它可在所有主流浏览器上运行，包括