下载

从这里开始

功能

Sass 工具

自定义

CSS 库

CSS 帮助程序

赞助商

Password.link

按钮

经典的按钮，具有不同的颜色、大小和状态

按钮是任何设计的必备元素。它旨在作为页面中交互式元素来显示和表现。

示例

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 映射 定义的所有不同颜色。

示例

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 布尔 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)
 
$button-responsive-sizes
 
var(--bulma-)
 
(
  "mobile": (
    "small": calc(var(--bulma-size-small) * 0.75),
    "normal": calc(var(--bulma-size-small) * 0.875),
    "medium": var(--bulma-size-small),
    "large": var(--bulma-size-normal),
  ),
  "tablet-only": (
    "small": calc(var(--bulma-size-small) * 0.875),
    "normal": var(--bulma-size-small),
    "medium": var(--bulma-size-normal),
    "large": var(--bulma-size-medium),
  ),
)

如何支持 Bulma

一次性捐赠

访问我们的赞助商

每月捐赠

成为赞助商
#native_company# #native_desc#
#native_cta#