v7.1.0

Button

Table of Contents

Detail

ボタン装飾を作るエレメント CSS。

Basic

Tag
Pattern
Other
<button class="button is-plain" type="button">戻る</button>
<button class="button is-plain is-primary" type="button">決定</button>
<button class="button is-plain is-info" type="button">情報</button>
<button class="button is-plain is-success" type="button">登録</button>
<button class="button is-plain is-warning" type="button">注意</button>
<button class="button is-plain is-danger" type="button">削除</button>
SelectorDescription
.buttonボタン装飾の起点として使うセレクター。
Warning

.button には .is-plain .is-outline .is-melt いずれかの付与が必須です。

Modifier (One is required)Description
.is-plain.button に付与すると塗りベースのボタンになります。
.is-outline.button に付与するとアウトラインのあるボタンになります。
.is-melt.button に付与すると背景に溶けた印象のボタンになります。
ModifierDescription
.is-strong.button に付与すると太文字になります。
.is-round.button に付与すると角が完全に丸くなります。
.is-floating.button.is-plain に付与すると浮いた装飾になります。
[disabled], .is-disabled.button に付与すると非活性になります。

Role

.is-(role) 形式のモディファイアを .button に付与すると、各役割毎のカラーリングに変化します。

PrimaryInfoSuccessWarningDanger
.is-primary.is-info.is-success.is-warning.is-danger
Tips

各役割毎のカラーリングと .is-floating を併用すると、影もカラーリングに添います。影をモノトーンにしたい場合は、Option の $option-add-style-button-role-shadow を false にします。

Square

Tag
Pattern
Other
<button class="button is-plain is-square" type="button"><i aria-hidden="true" class="fas fa-angle-left"></i></button>
<button class="button is-plain is-square is-primary" type="button"><i aria-hidden="true" class="fas fa-check"></i></button>
<button class="button is-plain is-square is-info" type="button"><i aria-hidden="true" class="fas fa-info-circle"></i></button>
<button class="button is-plain is-square is-success" type="button"><i aria-hidden="true" class="fas fa-save"></i></button>
<button class="button is-plain is-square is-warning" type="button"><i aria-hidden="true" class="fas fa-exclamation-triangle"></i></button>
<button class="button is-plain is-square is-danger" type="button"><i aria-hidden="true" class="fas fa-times"></i></button>
ModifierDescription
.is-square.button に付与すると正方形になります。

Circle

Tag
Pattern
Other
<button class="button is-plain is-circle" type="button"><i aria-hidden="true" class="fas fa-angle-left"></i></button>
<button class="button is-plain is-circle is-primary" type="button"><i aria-hidden="true" class="fas fa-check"></i></button>
<button class="button is-plain is-circle is-info" type="button"><i aria-hidden="true" class="fas fa-info-circle"></i></button>
<button class="button is-plain is-circle is-success" type="button"><i aria-hidden="true" class="fas fa-save"></i></button>
<button class="button is-plain is-circle is-warning" type="button"><i aria-hidden="true" class="fas fa-exclamation-triangle"></i></button>
<button class="button is-plain is-circle is-danger" type="button"><i aria-hidden="true" class="fas fa-times"></i></button>
ModifierDescription
.is-circle.button に付与すると正円になります。

Angle

Angle
Tag
Pattern
Other
<button class="button is-plain is-0 is-angle-right" type="button">戻る</button>
<button class="button is-plain is-primary is-0 is-angle-right" type="button">決定</button>
<button class="button is-plain is-info is-0 is-angle-right" type="button">情報</button>
<button class="button is-plain is-success is-0 is-angle-right" type="button">登録</button>
<button class="button is-plain is-warning is-0 is-angle-right" type="button">注意</button>
<button class="button is-plain is-danger is-0 is-angle-right" type="button">削除</button>
ModifierDescription
.is-angle-right.button に付与すると右に角マークが追加されます。
.is-angle-left.button に付与すると左に角マークが追加されます。
.is-angle-up.button.is-angle-right, .button.is-angle-left に付与すると角マークが上を向きます。
.is-angle-down.button.is-angle-right, .button.is-angle-left に付与すると角マークが下を向きます。
Warning

Angle には幅調整が含まれていませんので、ボタンの幅を Flex で広げたり、子要素の余白を is-padding-right-xxl などで追加する工夫が必要です。

Variables

CSS Variables
Name
Default Value
Compiled Value
  • Name
    $selector-button
    Default Value
    .button
    Compiled Value
    .button
  • Name
    $modifier-button-strong
    Default Value
    .is-strong
    Compiled Value
    .is-strong
  • Name
    $modifier-button-round
    Default Value
    .is-round
    Compiled Value
    .is-round
  • Name
    $modifier-button-floating
    Default Value
    .is-floating
    Compiled Value
    .is-floating
  • Name
    $modifier-button-square
    Default Value
    .is-square
    Compiled Value
    .is-square
  • Name
    $modifier-button-circle
    Default Value
    .is-circle
    Compiled Value
    .is-circle
  • Name
    $modifier-button-disabled
    Default Value
    .is-disabled
    Compiled Value
    .is-disabled
  • Name
    $modifier-button-plain
    Default Value
    .is-plain
    Compiled Value
    .is-plain
  • Name
    $modifier-button-outline
    Default Value
    .is-outline
    Compiled Value
    .is-outline
  • Name
    $modifier-button-melt
    Default Value
    .is-melt
    Compiled Value
    .is-melt
  • Name
    $modifier-button-primary
    Default Value
    .is-primary
    Compiled Value
    .is-primary
  • Name
    $modifier-button-info
    Default Value
    .is-info
    Compiled Value
    .is-info
  • Name
    $modifier-button-success
    Default Value
    .is-success
    Compiled Value
    .is-success
  • Name
    $modifier-button-warning
    Default Value
    .is-warning
    Compiled Value
    .is-warning
  • Name
    $modifier-button-danger
    Default Value
    .is-danger
    Compiled Value
    .is-danger
  • Name
    $modifier-button-angle-right
    Default Value
    .is-angle-right
    Compiled Value
    .is-angle-right
  • Name
    $modifier-button-angle-left
    Default Value
    .is-angle-left
    Compiled Value
    .is-angle-left
  • Name
    $modifier-button-angle-up
    Default Value
    .is-angle-up
    Compiled Value
    .is-angle-up
  • Name
    $modifier-button-angle-down
    Default Value
    .is-angle-down
    Compiled Value
    .is-angle-down
  • Name
    $button-padding
    Default Value
    0.5em 1em
    Compiled Value
    0.5em 1em
  • Name
    $button-border-width
    Default Value
    $global-border-width
    Compiled Value
    1px
  • Name
    $button-border-radius
    Default Value
    $radius-sm
    Compiled Value
    3px
  • Name
    $button-paint-color
    Default Value
    $convert-button-paint-color
    Compiled Value
    white
  • Name
    $button-line-height
    Default Value
    $line-height-md
    Compiled Value
    1.5
  • Name
    $button-transition
    Default Value
    $global-transition
    Compiled Value
    ease-out 0.12s
  • Name
    $button-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.5)
  • Name
    $button-strong-font-weight
    Default Value
    $font-weight-strong
    Compiled Value
    700
  • Name
    $button-round-border-radius
    Default Value
    $radius-full
    Compiled Value
    999em
  • Name
    $button-floating-shadow
    Default Value
    $global-floating-shadow-size $convert-shadow-alpha
    Compiled Value
    0 2px 6px 0 rgba(0, 0, 0, 0.15)
  • Name
    $button-floating-hover-shadow
    Default Value
    $global-floating-hover-shadow-size $convert-shadow-alpha
    Compiled Value
    0 4px 12px 0 rgba(0, 0, 0, 0.15)
  • Name
    $button-floating-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha, $global-floating-hover-shadow-size $convert-shadow-alpha
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.5), 0 4px 12px 0 rgba(0, 0, 0, 0.15)
  • Name
    $button-disabled-background-color
    Default Value
    $convert-disabled-background-color
    Compiled Value
    #bdbdbd
  • Name
    $button-disabled-color
    Default Value
    $convert-disabled-color
    Compiled Value
    rgba(0, 0, 0, 0.26)
  • Name
    $button-square-width
    Default Value
    calc(2.5em + #{$global-border-width} * 2)
    Compiled Value
    calc(2.5em + 1px * 2)
  • Name
    $button-square-height
    Default Value
    calc(2.5em + #{$global-border-width} * 2)
    Compiled Value
    calc(2.5em + 1px * 2)
  • Name
    $button-square-border-radius
    Default Value
    $radius-sm
    Compiled Value
    3px
  • Name
    $button-circle-width
    Default Value
    calc(2.5em + #{$global-border-width} * 2)
    Compiled Value
    calc(2.5em + 1px * 2)
  • Name
    $button-circle-height
    Default Value
    calc(2.5em + #{$global-border-width} * 2)
    Compiled Value
    calc(2.5em + 1px * 2)
  • Name
    $button-circle-border-radius
    Default Value
    $radius-full
    Compiled Value
    999em
  • Name
    $button-plain-background-color
    Default Value
    $convert-background-2
    Compiled Value
    whitesmoke
  • Name
    $button-plain-hover-background-color
    Default Value
    $convert-background-4
    Compiled Value
    #ededed
  • Name
    $button-plain-primary-background-color
    Default Value
    $convert-primary
    Compiled Value
    #37b0be
  • Name
    $button-plain-primary-hover-background-color
    Default Value
    $convert-primary-darken
    Compiled Value
    #319eaa
  • Name
    $button-plain-info-background-color
    Default Value
    $convert-info
    Compiled Value
    #4b9bd8
  • Name
    $button-plain-info-hover-background-color
    Default Value
    $convert-info-darken
    Compiled Value
    #368fd3
  • Name
    $button-plain-success-background-color
    Default Value
    $convert-success
    Compiled Value
    #2ca52c
  • Name
    $button-plain-success-hover-background-color
    Default Value
    $convert-success-darken
    Compiled Value
    #279127
  • Name
    $button-plain-warning-background-color
    Default Value
    $convert-warning
    Compiled Value
    #ec8313
  • Name
    $button-plain-warning-hover-background-color
    Default Value
    $convert-warning-darken
    Compiled Value
    #d47611
  • Name
    $button-plain-danger-background-color
    Default Value
    $convert-danger
    Compiled Value
    #db5757
  • Name
    $button-plain-danger-hover-background-color
    Default Value
    $convert-danger-darken
    Compiled Value
    #d74242
  • Name
    $button-plain-primary-floating-shadow
    Default Value
    $global-floating-shadow-size $convert-shadow-primary-alpha
    Compiled Value
    0 2px 6px 0 rgba(55, 176, 190, 0.6)
  • Name
    $button-plain-primary-floating-hover-shadow
    Default Value
    $global-floating-hover-shadow-size $convert-shadow-primary-alpha
    Compiled Value
    0 4px 12px 0 rgba(55, 176, 190, 0.6)
  • Name
    $button-plain-primary-floating-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha, $global-floating-hover-shadow-size $convert-shadow-primary-alpha
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.5), 0 4px 12px 0 rgba(55, 176, 190, 0.6)
  • Name
    $button-plain-info-floating-shadow
    Default Value
    $global-floating-shadow-size $convert-shadow-info-alpha
    Compiled Value
    0 2px 6px 0 rgba(75, 155, 216, 0.6)
  • Name
    $button-plain-info-floating-hover-shadow
    Default Value
    $global-floating-hover-shadow-size $convert-shadow-info-alpha
    Compiled Value
    0 4px 12px 0 rgba(75, 155, 216, 0.6)
  • Name
    $button-plain-info-floating-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha, $global-floating-hover-shadow-size $convert-shadow-info-alpha
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.5), 0 4px 12px 0 rgba(75, 155, 216, 0.6)
  • Name
    $button-plain-success-floating-shadow
    Default Value
    $global-floating-shadow-size $convert-shadow-success-alpha
    Compiled Value
    0 2px 6px 0 rgba(44, 165, 44, 0.6)
  • Name
    $button-plain-success-floating-hover-shadow
    Default Value
    $global-floating-hover-shadow-size $convert-shadow-success-alpha
    Compiled Value
    0 4px 12px 0 rgba(44, 165, 44, 0.6)
  • Name
    $button-plain-success-floating-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha, $global-floating-hover-shadow-size $convert-shadow-success-alpha
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.5), 0 4px 12px 0 rgba(44, 165, 44, 0.6)
  • Name
    $button-plain-warning-floating-shadow
    Default Value
    $global-floating-shadow-size $convert-shadow-warning-alpha
    Compiled Value
    0 2px 6px 0 rgba(236, 131, 19, 0.6)
  • Name
    $button-plain-warning-floating-hover-shadow
    Default Value
    $global-floating-hover-shadow-size $convert-shadow-warning-alpha
    Compiled Value
    0 4px 12px 0 rgba(236, 131, 19, 0.6)
  • Name
    $button-plain-warning-floating-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha, $global-floating-hover-shadow-size $convert-shadow-warning-alpha
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.5), 0 4px 12px 0 rgba(236, 131, 19, 0.6)
  • Name
    $button-plain-danger-floating-shadow
    Default Value
    $global-floating-shadow-size $convert-shadow-danger-alpha
    Compiled Value
    0 2px 6px 0 rgba(219, 87, 87, 0.6)
  • Name
    $button-plain-danger-floating-hover-shadow
    Default Value
    $global-floating-hover-shadow-size $convert-shadow-danger-alpha
    Compiled Value
    0 4px 12px 0 rgba(219, 87, 87, 0.6)
  • Name
    $button-plain-danger-floating-focus-shadow
    Default Value
    $global-focus-shadow-size $convert-focus-alpha, $global-floating-hover-shadow-size $convert-shadow-danger-alpha
    Compiled Value
    0 0 0 4px rgba(36, 151, 240, 0.5), 0 4px 12px 0 rgba(219, 87, 87, 0.6)
  • Name
    $button-outline-background-color
    Default Value
    $convert-background
    Compiled Value
    white
  • Name
    $button-outline-border-color
    Default Value
    $convert-border
    Compiled Value
    #d1d8dc
  • Name
    $button-outline-hover-background-color
    Default Value
    $convert-background-2
    Compiled Value
    whitesmoke
  • Name
    $button-outline-primary-border-color
    Default Value
    $convert-primary
    Compiled Value
    #37b0be
  • Name
    $button-outline-primary-color
    Default Value
    $convert-primary-strong
    Compiled Value
    #37b0be
  • Name
    $button-outline-primary-hover-background-color
    Default Value
    $convert-primary
    Compiled Value
    #37b0be
  • Name
    $button-outline-info-border-color
    Default Value
    $convert-info
    Compiled Value
    #4b9bd8
  • Name
    $button-outline-info-color
    Default Value
    $convert-info-strong
    Compiled Value
    #4b9bd8
  • Name
    $button-outline-info-hover-background-color
    Default Value
    $convert-info
    Compiled Value
    #4b9bd8
  • Name
    $button-outline-success-border-color
    Default Value
    $convert-success
    Compiled Value
    #2ca52c
  • Name
    $button-outline-success-color
    Default Value
    $convert-success-strong
    Compiled Value
    #2ca52c
  • Name
    $button-outline-success-hover-background-color
    Default Value
    $convert-success
    Compiled Value
    #2ca52c
  • Name
    $button-outline-warning-border-color
    Default Value
    $convert-warning
    Compiled Value
    #ec8313
  • Name
    $button-outline-warning-color
    Default Value
    $convert-warning-strong
    Compiled Value
    #ec8313
  • Name
    $button-outline-warning-hover-background-color
    Default Value
    $convert-warning
    Compiled Value
    #ec8313
  • Name
    $button-outline-danger-border-color
    Default Value
    $convert-danger
    Compiled Value
    #db5757
  • Name
    $button-outline-danger-color
    Default Value
    $convert-danger-strong
    Compiled Value
    #db5757
  • Name
    $button-outline-danger-hover-background-color
    Default Value
    $convert-danger
    Compiled Value
    #db5757
  • Name
    $button-melt-hover-background-color
    Default Value
    $convert-background-alpha
    Compiled Value
    rgba(0, 0, 0, 0.05)
  • Name
    $button-melt-primary-color
    Default Value
    $convert-primary-strong
    Compiled Value
    #37b0be
  • Name
    $button-melt-info-color
    Default Value
    $convert-info-strong
    Compiled Value
    #4b9bd8
  • Name
    $button-melt-success-color
    Default Value
    $convert-success-strong
    Compiled Value
    #2ca52c
  • Name
    $button-melt-warning-color
    Default Value
    $convert-warning-strong
    Compiled Value
    #ec8313
  • Name
    $button-melt-danger-color
    Default Value
    $convert-danger-strong
    Compiled Value
    #db5757
  • Name
    $button-angle-size
    Default Value
    0.5em
    Compiled Value
    0.5em
  • Name
    $button-angle-border-width
    Default Value
    $global-border-width * 2
    Compiled Value
    2px
  • Name
    $button-angle-border-color
    Default Value
    $convert-border-1
    Compiled Value
    rgba(0, 0, 0, 0.26)

Mixins

  • musubii-style-button()
  • musubii-style-button-strong()
  • musubii-style-button-disabled()
  • musubii-style-button-round()
  • musubii-style-button-floating()
  • musubii-style-button-square()
  • musubii-style-button-circle()
  • musubii-style-button-plain()
  • musubii-style-button-plain-primary()
  • musubii-style-button-plain-info()
  • musubii-style-button-plain-success()
  • musubii-style-button-plain-warning()
  • musubii-style-button-plain-danger()
  • musubii-style-button-plain-disabled()
  • musubii-style-button-plain-primary-floating()
  • musubii-style-button-plain-info-floating()
  • musubii-style-button-plain-success-floating()
  • musubii-style-button-plain-warning-floating()
  • musubii-style-button-plain-danger-floating()
  • musubii-style-button-outline()
  • musubii-style-button-outline-primary()
  • musubii-style-button-outline-info()
  • musubii-style-button-outline-success()
  • musubii-style-button-outline-warning()
  • musubii-style-button-outline-danger()
  • musubii-style-button-outline-disabled()
  • musubii-style-button-melt()
  • musubii-style-button-melt-primary()
  • musubii-style-button-melt-info()
  • musubii-style-button-melt-success()
  • musubii-style-button-melt-warning()
  • musubii-style-button-melt-danger()
  • musubii-style-button-melt-disabled()
  • musubii-style-button-angle()
  • musubii-style-button-angle-right()
  • musubii-style-button-angle-left()
  • musubii-style-button-angle-up()
  • musubii-style-button-angle-down()
  • musubii-style-button-angle-color-current()

Sources