Skip to content

按钮

按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。

使用方法

使用 .btn 类来获得按钮的外观和交互体验,通常用在元素 <button><a> 上。

配合丰富的CSS 工具类来实现不同按钮的外观。

图标按钮

按钮配合图标组件一起使用时,自动呈现为图标按钮。

外观

外观类型

配合使用CSS 工具类来实现不同按钮的外观。下面展示各种工具类的外观效果。

链接按钮

使用 .btn-link 类来获得链接按钮的外观。

按钮圆角

搭配 CSS 工具类 rounded-* 为按钮应用不同的圆角样式。

按钮阴影效果

搭配 CSS 工具类 shadow-* 为按钮应用不同的阴影样式。

尺寸

除了默认大小,按钮还提供了额外的 4 种预设尺寸。

形状

正方形按钮

通过工具类 square 可以让按钮获得正方形外观,通常作为图标按钮使用。

圆形按钮

当与工具类 circlesquare 一起使用时则获得圆形按钮。

状态

禁用状态

为按钮提供 disabled="disabled" 属性或 disabled 工具类来禁用按钮。被禁用的按钮将无法响应点击事件。

激活状态

为按钮添加 active 类启用激活状态。

加载中状态

为按钮提供动画图标实现加载中状态。

CSS 类

按钮提供了如下 CSS 类:

类型作用
btn实体类元素作为按钮组件
btn-link修饰类使用链接按钮外观
square工具类按钮使用正方形外观
size-xs工具类按钮使用超小号尺寸
size-sm工具类按钮使用小号尺寸
size-lg工具类按钮使用大号尺寸
size-xl工具类按钮使用超大号尺寸

CSS 变量

变量名称变量含义
--btn-radius按钮圆角
--btn-bg按钮背景颜色
--btn-border-color按钮边框颜色
--btn-height按钮高度