Button

具有了各种颜色、尺寸和状态的 button

Button 是设计中的必备元素。在您的页面中通茶它是一个查看和执行的互动性元素。

示例

HTML

<button class="button">Button</button>

button 类可用于：

<a> 锚点链接
<button> 表单按钮
<input type="submit"> 提交输入
<input type="reset"> 重置输入

示例

Anchor

HTML

<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">

颜色 #

Button 在 Sass map 中用 $colors 定义了各种颜色。

示例

HTML

<button class="button is-white">White</button>
<button class="button is-light">Light</button>
<button class="button is-dark">Dark</button>
<button class="button is-black">Black</button>
<button class="button is-text">Text</button>
<button class="button is-ghost">Ghost</button>

示例

HTML

<div class="buttons">
  <button class="button is-primary">Primary</button>
  <button class="button is-link">Link</button>
</div>

<div class="buttons">
  <button class="button is-info">Info</button>
  <button class="button is-success">Success</button>
  <button class="button is-warning">Warning</button>
  <button class="button is-danger">Danger</button>
</div>

每种颜色都有它的 light 版本。只需在其颜色修饰符后再加上 is-light 修饰符就可以使用该 button 的 light 版本。

示例

HTML

<div class="buttons">
  <button class="button is-primary is-light">Primary</button>
  <button class="button is-link is-light">Link</button>
</div>

<div class="buttons">
  <button class="button is-info is-light">Info</button>
  <button class="button is-success is-light">Success</button>
  <button class="button is-warning is-light">Warning</button>
  <button class="button is-danger is-light">Danger</button>
</div>

型号 #

button 有 4 种不同型号：

small
normal
medium
large

默认型号是 normal，修饰符 is-normal 之所以需要，是因为有时您需要重置到 normal 型号。

示例

HTML

<button class="button is-small">Small</button>
<button class="button">Default</button>
<button class="button is-normal">Normal</button>
<button class="button is-medium">Medium</button>
<button class="button is-large">Large</button>

您可以通过将多个 button 放入一个 buttons 父元素中然后一次修改其型号为以下三个修饰符之一：

buttons are-small
buttons are-medium
buttons are-large

示例

HTML

<div class="buttons are-medium">
  <button class="button">All</button>
  <button class="button">Medium</button>
  <button class="button">Size</button>
</div>

您可以通过为其添加修饰符修改部分 button 的型号。
例如，如果您想要所有的 button 都是 small 型号，但其中一个是 normal 型号，只需这么做：

示例

HTML

<div class="buttons are-small">
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button">Small</button>
  <button class="button is-normal">Normal</button>
  <button class="button">Small</button>
</div>

自适应型号 #

New! 0.9.4

如果您想要为每个断点设置不同的 button 型号，可以使用 Bulma 的自适应 button。只需添加 is-responsive 修饰符：

Name	Fixed size	Responsive size (resize window to see in action)	Code
Default			`<button class="button is-responsive"> Default </button>`
Small			`<button class="button is-small is-responsive"> Small </button>`
Normal			`<button class="button is-normal is-responsive"> Normal </button>`
Medium			`<button class="button is-medium is-responsive"> Medium </button>`
Large			`<button class="button is-large is-responsive"> Large </button>`

在新窗口中打开表格

您可以定制型号——通过重写 Sass 变量 $button-responsive-sizes 即可。

显示 #

示例

HTML

<button class="button is-small is-fullwidth">Small</button>
<button class="button is-fullwidth">Normal</button>
<button class="button is-medium is-fullwidth">Medium</button>
<button class="button is-large is-fullwidth">Large</button>

样式 #

Outlined

示例

HTML

<button class="button is-outlined">Outlined</button>
<button class="button is-primary is-outlined">Outlined</button>
<button class="button is-link is-outlined">Outlined</button>
<button class="button is-info is-outlined">Outlined</button>
<button class="button is-success is-outlined">Outlined</button>
<button class="button is-danger is-outlined">Outlined</button>

Inverted（文本颜色变背景色，反之亦然）

<button class="button is-primary is-inverted">Inverted</button>
<button class="button is-link is-inverted">Inverted</button>
<button class="button is-info is-inverted">Inverted</button>
<button class="button is-success is-inverted">Inverted</button>
<button class="button is-danger is-inverted">Inverted</button>

Invert Outlined （反转颜色变为文本和边框颜色）

<button class="button is-primary is-inverted is-outlined">Invert Outlined</button>
<button class="button is-link is-inverted is-outlined">Invert Outlined</button>
<button class="button is-info is-inverted is-outlined">Invert Outlined</button>
<button class="button is-success is-inverted is-outlined">Invert Outlined</button>
<button class="button is-danger is-inverted is-outlined">Invert Outlined</button>

圆角 button

<button class="button is-rounded">Rounded</button>
<button class="button is-primary is-rounded">Rounded</button>
<button class="button is-link is-rounded">Rounded</button>
<button class="button is-info is-rounded">Rounded</button>
<button class="button is-success is-rounded">Rounded</button>
<button class="button is-danger is-rounded">Rounded</button>

状态 #

Bulma 为 button 的不同状态（state）制作了样式。每个状态可使用一个 CSS 类和一个对应的伪类（pseudo-class）来表示：

:hover 和 is-hovered
:focus 和 is-focused
:active 和 is-active

这就可以使您不用触碰它而获得相应的状态表现。

Normal

示例

HTML

<button class="button">Normal</button>
<button class="button is-primary">Normal</button>
<button class="button is-link">Normal</button>
<button class="button is-info">Normal</button>
<button class="button is-success">Normal</button>
<button class="button is-warning">Normal</button>
<button class="button is-danger">Normal</button>

Hover

示例

HTML

<button class="button is-hovered">Hover</button>
<button class="button is-primary is-hovered">Hover</button>
<button class="button is-link is-hovered">Hover</button>
<button class="button is-info is-hovered">Hover</button>
<button class="button is-success is-hovered">Hover</button>
<button class="button is-warning is-hovered">Hover</button>
<button class="button is-danger is-hovered">Hover</button>

Focus

示例

HTML

<button class="button is-focused">Focus</button>
<button class="button is-primary is-focused">Focus</button>
<button class="button is-link is-focused">Focus</button>
<button class="button is-info is-focused">Focus</button>
<button class="button is-success is-focused">Focus</button>
<button class="button is-warning is-focused">Focus</button>
<button class="button is-danger is-focused">Focus</button>

Active

示例

HTML

<button class="button is-active">Active</button>
<button class="button is-primary is-active">Active</button>
<button class="button is-link is-active">Active</button>
<button class="button is-info is-active">Active</button>
<button class="button is-success is-active">Active</button>
<button class="button is-warning is-active">Active</button>
<button class="button is-danger is-active">Active</button>

加载中

您可以通过添加 is-loading 修饰符方式很容易将一个 button 变成加载中样式。您甚至不需要删除里面的文字，因为允许 button 在从默认状态到加载状态时保持它的原本型号。

因为加载旋钮使用 ::after 伪元素扩展，它不支持 <input type="submit"> 元素。可以考虑使用 <button type="submit"> 替换。

<button class="button is-loading">Loading</button>
<button class="button is-primary is-loading">Loading</button>
<button class="button is-link is-loading">Loading</button>
<button class="button is-info is-loading">Loading</button>
<button class="button is-success is-loading">Loading</button>
<button class="button is-warning is-loading">Loading</button>
<button class="button is-danger is-loading">Loading</button>

静态

您可以通过使用 is-static 修饰符创建一个非互动 button。这对于对齐有文本标题的输入框很有用，例如当我们使用表单扩展时会看到。

Static

<span class="button is-static">Static</span>

禁用

Bulma 支持使用 disabled Boolean HTML 属性，从而阻止用户使用 button 互动。

CSS 类 is-disabled 已被弃用，而启用 HTML 的 disabled 属性。了解更多

<button class="button" title="Disabled button" disabled>Disabled</button>
<button class="button is-primary" title="Disabled button" disabled>Disabled</button>
<button class="button is-link" title="Disabled button" disabled>Disabled</button>
<button class="button is-info" title="Disabled button" disabled>Disabled</button>
<button class="button is-success" title="Disabled button" disabled>Disabled</button>
<button class="button is-warning" title="Disabled button" disabled>Disabled</button>
<button class="button is-danger" title="Disabled button" disabled>Disabled</button>

使用 Font Awesome 图标

Bulma 的 button 通过添加 Font Awesome 图标很容易扩展增强。最好的做法就是，通过使用独立的 <span> 元素包裹内部文字。

示例

HTML

<p class="buttons">
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-bold"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-italic"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-underline"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-primary">
    <span class="icon">
      <i class="fab fa-twitter"></i>
    </span>
    <span>@jgthms</span>
  </button>
  <button class="button is-success">
    <span class="icon is-small">
      <i class="fas fa-check"></i>
    </span>
    <span>Save</span>
  </button>
  <button class="button is-danger is-outlined">
    <span>Delete</span>
    <span class="icon is-small">
      <i class="fas fa-times"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-small">
    <span class="icon is-small">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-medium">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
  <button class="button is-large">
    <span class="icon is-medium">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </button>
</p>

如果 button 只包含图标，Bulma 不管 button 还是图标的大小，都会确保 button 为方形。

<p class="buttons">
  <button class="button is-small">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-medium">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button is-medium">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
  <button class="button is-medium">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </button>
</p>
<p class="buttons">
  <button class="button is-large">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </button>
  <button class="button is-large">
    <span class="icon">
      <i class="fas fa-heading fa-lg"></i>
    </span>
  </button>
  <button class="button is-large">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </button>
</p>

Button 组 #

如果您想要在一行里将 button 分组到一起，在 field 容器上使用 is-grouped 修饰符：

示例

HTML

<div class="field is-grouped">
  <p class="control">
    <button class="button is-link">
      Save changes
    </button>
  </p>
  <p class="control">
    <button class="button">
      Cancel
    </button>
  </p>
  <p class="control">
    <button class="button is-danger">
      Delete post
    </button>
  </p>
</div>

Button 扩展 #

如果您要为 button 做扩展（addons），在 field 容器上使用 has-addons 修饰符:

示例

HTML

<div class="field has-addons">
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-left"></i>
      </span>
      <span>Left</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-center"></i>
      </span>
      <span>Center</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-right"></i>
      </span>
      <span>Right</span>
    </button>
  </p>
</div>

Button 组扩展（addons） #

您也可以将扩展分组使用：

示例

HTML

<div class="field has-addons">
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-bold"></i>
      </span>
      <span>Bold</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-italic"></i>
      </span>
      <span>Italic</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-underline"></i>
      </span>
      <span>Underline</span>
    </button>
  </p>
</div>

<div class="field has-addons">
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-left"></i>
      </span>
      <span>Left</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-center"></i>
      </span>
      <span>Center</span>
    </button>
  </p>
  <p class="control">
    <button class="button">
      <span class="icon is-small">
        <i class="fas fa-align-right"></i>
      </span>
      <span>Right</span>
    </button>
  </p>
</div>

Button 列表 #

您可以通过使用 buttons 修饰符创建 Button 列表。

<div class="buttons">
  <button class="button is-success">Save changes</button>
  <button class="button is-info">Save and continue</button>
  <button class="button is-danger">Cancel</button>
</div>

如果列表很长，它会自动使用多行进行包裹，从而保证所有 button 合理布局。

<div class="buttons">
  <button class="button">One</button>
  <button class="button">Two</button>
  <button class="button">Three</button>
  <button class="button">Four</button>
  <button class="button">Five</button>
  <button class="button">Six</button>
  <button class="button">Seven</button>
  <button class="button">Eight</button>
  <button class="button">Nine</button>
  <button class="button">Ten</button>
  <button class="button">Eleven</button>
  <button class="button">Twelve</button>
  <button class="button">Thirteen</button>
  <button class="button">Fourteen</button>
  <button class="button">Fifteen</button>
  <button class="button">Sixteen</button>
  <button class="button">Seventeen</button>
  <button class="button">Eighteen</button>
  <button class="button">Nineteen</button>
  <button class="button">Twenty</button>
</div>

您可以将 has-addons 修饰符连同 buttons 修饰符一起使用。

<div class="buttons has-addons">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">No</button>
</div>

使用 is-centered 或 is-right 修饰符调整对齐方式。

<div class="buttons has-addons is-centered">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">No</button>
</div>

<div class="buttons has-addons is-right">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">No</button>
</div>

您可以在每一个 Button 上使用任何修饰符类来美化它们。要确保添加 is-selected 修饰符到那个需要看起来要高于其它相邻 Button 的元素之上。

<div class="buttons has-addons">
  <button class="button is-success is-selected">Yes</button>
  <button class="button">Maybe</button>
  <button class="button">No</button>
</div>

<div class="buttons has-addons">
  <button class="button">Yes</button>
  <button class="button is-info is-selected">Maybe</button>
  <button class="button">No</button>
</div>

<div class="buttons has-addons">
  <button class="button">Yes</button>
  <button class="button">Maybe</button>
  <button class="button is-danger is-selected">No</button>
</div>

表单组和 Button 列表的区别

这个 Button 列表样式可认为是 field is-grouped 的一种或者是新 buttons 类，差别很小：

buttons 简化了标记
buttons 可以只包含 button 元素
field is-grouped 可以包含任何类型控制输入元素
field is-grouped 可强制所有控制元素到一行之内
使用 field is-grouped 您可以 expand 控制

总之，如果您想要一个 button 列表，就推荐使用 buttons。如果您需要更多的控制定制和元素，就是用表单组。

Variables #

Name

Type

Value

Computed Value

Computed Type

$button-color

variable

$text-strong

hsl(0, 0%, 21%)

color

$button-background-color

variable

$scheme-main

hsl(0, 0%, 100%)

color

$button-family

boolean

false

$button-border-color

variable

$border

hsl(0, 0%, 86%)

color

$button-border-width

variable

$control-border-width

$button-padding-vertical

size

calc(0.5em - #{$button-border-width})

$button-padding-horizontal

size

1em

$button-hover-color

variable

$link-hover

hsl(0, 0%, 21%)

color

$button-hover-border-color

variable

$link-hover-border

hsl(0, 0%, 71%)

color

$button-focus-color

variable

$link-focus

hsl(0, 0%, 21%)

color

$button-focus-border-color

variable

$link-focus-border

hsl(229, 53%,  53%)

color

$button-focus-box-shadow-size

size

0 0 0 0.125em

$button-focus-box-shadow-color

compound

bulmaRgba($link, 0.25)

$button-active-color

variable

$link-active

hsl(0, 0%, 21%)

color

$button-active-border-color

variable

$link-active-border

hsl(0, 0%, 29%)

color

$button-text-color

variable

$text

hsl(0, 0%, 29%)

color

$button-text-decoration

string

underline

$button-text-hover-background-color

variable

$background

hsl(0, 0%, 96%)

color

$button-text-hover-color

variable

$text-strong

hsl(0, 0%, 21%)

color

$button-ghost-background

string

none

$button-ghost-border-color

string

transparent

$button-ghost-color

variable

$link

hsl(229, 53%,  53%)

color

$button-ghost-decoration

string

none

$button-ghost-hover-color

variable

$link

hsl(229, 53%,  53%)

color

$button-ghost-hover-decoration

string

underline

$button-disabled-background-color

variable

$scheme-main

hsl(0, 0%, 100%)

color

$button-disabled-border-color

variable

$border

hsl(0, 0%, 86%)

color

$button-disabled-shadow

shadow

none

$button-disabled-opacity

unitless

0.5

$button-static-color

variable

$text-light

hsl(0, 0%, 48%)

color

$button-static-background-color

variable

$scheme-main-ter

hsl(0, 0%, 96%)

color

$button-static-border-color

variable

$border

hsl(0, 0%, 86%)

color

$button-colors

variable

$colors

Bulma colors

map

$button-responsive-sizes

compound

("mobile": ("small": ($size-small * 0.75), "normal": ($size-small * 0.875), "medium": $size-small, "large": $size-normal), "tablet-only": ("small": ($size-small * 0.875), "normal": ($size-small), "medium": $size-normal, "large": $size-medium))