按钮

经典的 button，具有不同的颜色、尺寸和状态

button 是任何设计的基本元素。它旨在看起来和表现得像是页面的交互式元素。

示例

HTML

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

button 类可以用于

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

示例

锚点

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" />

颜色 #

按钮有 $colors Sass map 定义的所有不同颜色。

示例

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>

每种颜色都有其浅色版本。只需将修饰符 is-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>

还存在一个深色版本。只需附加修饰符 is-dark。

示例

HTML

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

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

尺寸 #

按钮有 4 种不同的尺寸：

小
普通
中
大

虽然默认尺寸是普通尺寸，但如果您需要将按钮重置为其正常尺寸，则存在 is-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>

您可以通过将多个按钮包装在 buttons 父容器中，并应用 3 个修饰符之一来一次性更改它们的大小

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>

您可以通过简单地将修饰符类应用于它们来更改仅 按钮子集 的大小。
例如，如果您希望所有按钮都小，但仍有一个按钮为普通尺寸，只需执行以下操作

示例

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>

响应式尺寸 #

如果您希望每个断点都有不同的按钮尺寸，您可以使用 Bulma 的 响应式 按钮。只需附加 is-responsive 修饰符

名称	固定尺寸	响应式尺寸 (调整窗口大小以查看效果)	代码
默认			`<button class="button is-responsive"> Default </button>`
小			`<button class="button is-small is-responsive"> Small </button>`
普通			`<button class="button is-normal is-responsive"> Normal </button>`
中			`<button class="button is-medium is-responsive"> Medium </button>`
大			`<button class="button is-large is-responsive"> Large </button>`

您可以通过覆盖 $button-responsive-sizes Sass 变量来自定义尺寸。

显示 #

示例

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>

样式 #

轮廓

示例

HTML

<button class="button is-link is-outlined">Outlined</button>
<button class="button is-primary 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>

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

<button class="button is-link is-inverted">Inverted</button>
<button class="button is-primary 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>

圆角按钮

<button class="button is-rounded">Rounded</button>
<button class="button is-link is-rounded">Rounded</button>
<button class="button is-primary 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 样式化了其按钮的不同状态。每个状态都可以作为伪类和 CSS 类使用

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

这允许您获得特定状态的样式，而无需触发它。

普通

示例

HTML

<button class="button">Normal</button>
<button class="button is-link">Normal</button>
<button class="button is-primary">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>

悬停

示例

HTML

<button class="button is-hovered">Hover</button>
<button class="button is-link is-hovered">Hover</button>
<button class="button is-primary 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>

聚焦

示例

HTML

<button class="button is-focused">Focus</button>
<button class="button is-link is-focused">Focus</button>
<button class="button is-primary 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>

激活

示例

HTML

<button class="button is-active">Active</button>
<button class="button is-link is-active">Active</button>
<button class="button is-primary 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 修饰符非常轻松地将按钮转换为其加载版本。您甚至不需要删除内部文本，这使得按钮在其默认状态和加载状态之间保持其原始大小。

由于加载微调器是使用 ::after 伪元素实现的，因此 <input type="submit"> 元素不支持它。请考虑改用 <button type="submit">。

<button class="button is-loading">Loading</button>
<button class="button is-link is-loading">Loading</button>
<button class="button is-primary 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 修饰符创建一个 非交互式按钮。这对于将文本标签与输入对齐非常有用，例如在使用表单插件时。

静态

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

已禁用

Bulma 支持使用 disabled Boolean HTML 属性，该属性阻止用户与按钮交互。

is-disabled CSS 类已弃用，取而代之的是 disabled HTML 属性。了解更多

<button class="button" title="Disabled button" disabled>Disabled</button>
<button class="button is-link" title="Disabled button" disabled>
  Disabled
</button>
<button class="button is-primary" 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 图标

通过添加 Font Awesome 图标，可以轻松增强 Bulma 按钮。为了获得最佳效果，请将内部文本包装在单独的 <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>

如果按钮仅包含一个图标，Bulma 将确保按钮保持正方形，无论按钮或图标的大小如何。

<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>

按钮组 #

如果您想将按钮组合在一行上，请在 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>

按钮插件 #

如果您想将按钮用作插件，请在 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>

带有插件的按钮组 #

您也可以将插件组合在一起

示例

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>

按钮列表 #

您可以使用 buttons 容器创建一个按钮列表。

<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>

如果列表非常长，它将自动在多行上换行，同时保持所有按钮均匀间隔。

<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 修饰符将按钮连接在一起。

<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>

您可以在每个按钮上使用任何修饰符类来区分它们。确保也添加 is-selected 修饰符，以确保所选按钮位于其同级按钮之上。

<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>

表单组和 按钮列表 之间的区别

虽然可以通过 field is-grouped 或新的 buttons 类来实现此按钮列表样式，但存在一些差异

buttons 具有更简单的标记
buttons 只能包含 button 元素
field is-grouped 可以包含任何类型的 control 输入
field is-grouped 可以强制将所有控件放在同一行上
使用 field is-grouped 你可以扩展其中一个控件

基本上，如果你只需要一个*按钮*列表，建议使用 buttons。如果你需要更多关于样式和元素的控制，请使用表单组。

Sass 和 CSS 变量 #

Sass 变量	CSS 变量	值
`$button-weight`	`var(--bulma-button-weight)`	`var(--bulma-weight-medium)`
`$button-family`	`var(--bulma-button-family)`	`false`
`$button-border-color`	`var(--bulma-button-border-color)`	`var(--bulma-border)`
`$button-border-style`	`var(--bulma-button-border-style)`	`solid`
`$button-border-width`	`var(--bulma-button-border-width)`	`var(--bulma-control-border-width)`
`$button-padding-vertical`	`var(--bulma-button-padding-vertical)`	`0.5em`
`$button-padding-horizontal`	`var(--bulma-button-padding-horizontal)`	`1em`
`$button-focus-border-color`	`var(--bulma-button-focus-border-color)`	`var(--bulma-link-focus-border)`
`$button-focus-box-shadow-size`	`var(--bulma-button-focus-box-shadow-size)`	`0 0 0 0.125em`
`$button-focus-box-shadow-color`	`var(--bulma-button-focus-box-shadow-color)`	`hsla( var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-on-scheme-l), 0.25 )`
`$button-active-color`	`var(--bulma-button-active-color)`	`var(--bulma-link-active)`
`$button-active-border-color`	`var(--bulma-button-active-border-color)`	`var(--bulma-link-active-border)`
`$button-text-color`	`var(--bulma-button-text-color)`	`var(--bulma-text)`
`$button-text-decoration`	`var(--bulma-button-text-decoration)`	`underline`
`$button-text-hover-background-color`	`var(--bulma-button-text-hover-background-color)`	`var(--bulma-background)`
`$button-text-hover-color`	`var(--bulma-button-text-hover-color)`	`var(--bulma-text-strong)`
`$button-ghost-background`	`var(--bulma-button-ghost-background)`	`none`
`$button-ghost-border-color`	`var(--bulma-button-ghost-border-color)`	`transparent`
`$button-ghost-color`	`var(--bulma-button-ghost-color)`	`var(--bulma-link-text)`
`$button-ghost-decoration`	`var(--bulma-button-ghost-decoration)`	`none`
`$button-ghost-hover-color`	`var(--bulma-button-ghost-hover-color)`	`var(--bulma-link)`
`$button-ghost-hover-decoration`	`var(--bulma-button-ghost-hover-decoration)`	`underline`
`$button-disabled-background-color`	`var(--bulma-button-disabled-background-color)`	`var(--bulma-scheme-main)`
`$button-disabled-border-color`	`var(--bulma-button-disabled-border-color)`	`var(--bulma-border)`
`$button-disabled-shadow`	`var(--bulma-button-disabled-shadow)`	`none`
`$button-disabled-opacity`	`var(--bulma-button-disabled-opacity)`	`0.5`
`$button-static-color`	`var(--bulma-button-static-color)`	`var(--bulma-text-weak)`
`$button-static-background-color`	`var(--bulma-button-static-background-color)`	`var(--bulma-scheme-main-ter)`
`$button-static-border-color`	`var(--bulma-button-static-border-color)`	`var(--bulma-border)`

从这里开始

特性

Sass 工具

自定义

CSS 库

CSS 辅助类

按钮

经典的 button，具有不同的颜色、尺寸和状态

颜色 #

尺寸 #

响应式尺寸 #

显示 #

样式 #

轮廓

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

圆角按钮

状态 #

普通

悬停

聚焦

激活

加载中

静态

已禁用

带有 Font Awesome 图标

按钮组 #

按钮插件 #

带有插件的按钮组 #

按钮列表 #

Sass 和 CSS 变量 #

如何支持 Bulma