菜单

按钮
按钮是用来指示用户操作的

下载

种类

虽然任何标签都可以当按钮使用,但如果想要 聚焦键盘 ,你只能带上 <button> 或者添加一个 tabindex="0" 的属性。键盘访问按钮将保持焦点样式点击后,会是视觉上的震动。

可聚焦

强调 (Emphasis)

按钮可以格式化以显示不同级别的强调

site.variables 中设置你的的颜色为基色或者副色,能够显示在当前主题中。

动画 (Animated)

按钮可以通过动画来显示隐藏的内容

按钮的尺寸将根据可见内容的尺寸自动调整,请确保有足够的空间来显示隐藏内容。
下一步
注册账户

标签 (Label)

按钮可以在 标签 旁边显示

喜欢
2,048
2,048
喜欢
喜欢
1,048
讨厌
1,048

图标 (Icon)

一个按钮只能有一个图标

图标标签(Labeled Icon)

按钮可以用图标来代表标签

基础的 (Basic)

基础按钮是不显眼的

反色 (Inverted)

按钮可以被设置为暗色背景

组合

按钮组 (Buttons)

多个按钮可以作为一个组

图标按钮组(Icon Buttons)

按钮组可以显示一组图标

内容

条按钮 (Conditionals)

按钮组可以显示不同条件

Or 按钮可以有他自己的文字描述,用 data-text 来设置即可。 如果大小被限制了,就需要调整 @orCircleSize 属性。

状态

激活 (Active)

按钮可以表现出正在被点击

禁用 (Disabled)

按钮可以表现出不可交互的状态

加载 (Loading)

按钮可以表现出正在加载的状态

变形

社交 (Social)

按钮可以被格式化为社交网站链接

尺寸 (Sizes)

按钮可以有不同尺寸

浮动 (Floated)

按钮可以在容器中左浮动或者右浮动

颜色 (Colored)

按钮可以有不同颜色

紧凑 (Compact)

按钮可以缩减自身内边距以适应紧凑的空间

切换 (Toggle)

按钮可以格式化为开关

积极 (Positive)

按钮可以暗示一个积极的后果

消极 (Negative)

按钮可以暗示一个消极的后果

流式 (Fluid)

按钮可以占满整个容器

圆形 (Circular)

按钮可以是圆的

垂直附加 (Vertically Attached)

按钮可以附加至内容的顶部或底部

顶端
底端
One
Two
One
Two

水平附加 (Horizontally Attached)

按钮可被放置在文本内容左侧或右侧

变化的组

垂直组 (Vertical Buttons)

组可以格式化为垂直排列

图标组 (Icon Buttons)

组可以格式化为图标

图标标签组 (Labeled Icon Buttons)

组可以格式化为带标签的图标组

混合组 (Mixed Group)

混合组可以将多个按钮一起使用

均匀划分 (Equal Width)

组按钮可以均分为对个使用

带颜色的组 (Colored Buttons)

组可以有共同的颜色

基本组 (Basic Buttons)

按钮组可以不那么明显

One
Two
Three

分组大小 (Group Sizes)

分组可以有共同的大小