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)来表示:

  • :hoveris-hovered
  • :focusis-focused
  • :activeis-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-centeredis-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))

Made with Bulma 此页面为开放源码页面。 发现排版问题?或者表达模糊?
在 GitHub 改进该页内容

#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布!