MUSUBii

Button

Plain

ボタンを作るには、ボタンをまとめるブロック要素の class を .btns 、ボタン自体の class を .btn にします。装飾をプレーンタイプにするには .btn に .is-plain を付与します。

<div class="btns">
  <button class="btn is-plain">戻る</button>
  <button class="btn is-plain is-primary">決定</button>
  <button class="btn is-plain is-success">登録</button>
  <button class="btn is-plain is-danger">削除</button>
  <button class="btn is-plain is-disable">不可</button>
  <button class="btn is-plain is-primary">
    <i class="fas fa-flag" aria-hidden="true"></i>
    <span class="text">FontAwesome</span>
  </button>
  <button class="btn is-plain is-success">
    <span class="text">FontAwesome</span>
    <i class="fas fa-angle-right is-fit" aria-hidden="true"></i>
  </button>
  <button class="btn is-plain is-primary">
    <i class="material-icons">face</i>
    <span class="text">Material Icons</span>
  </button>
  <button class="btn is-plain is-success">
    <span class="text">Material Icons</span>
    <i class="material-icons">keyboard_arrow_right</i>
  </button>
</div>

Melt

ホバーしたときに浮き上がるボタンを作るには .btn に .is-melt を付与します。

<button class="btn is-melt">...</button>

Outline

アウトラインのみでボタンらしさを出すには .btn に .is-outline を付与します。

<button class="btn is-outline">...</button>

Ghost

背景に色や写真を透かせるボタンを作るには .btn に .is-ghost を付与します。

<button class="btn is-ghost">...</button>

Floating

.btn に class .is-floating を付与することで、ドロップシャドウを付けられます。

<button class="btn is-plain is-floating">...</button>

Round

.btn に class .is-round を付与することでボタンの角を丸められます。

<button class="btn is-plain is-round">...</button>

Circle

.btn に class .is-circle を付与することでボタンの円形にできます。

<button class="btn is-plain is-circle">...</button>

Size

サイズを表す class を付与することでボタンの大きさを変化させられます。角丸のサイズは相対的に変化します。デフォルトは .is-md。サイズは設定してあるメディアクエリごとに指定可能です。

<div class="btns">
  <button class="btn is-xxs">極小</button>
  <button class="btn is-xs">小さい</button>
  <button class="btn is-sm">小さめ</button>
  <button class="btn is-md">中くらい</button>
  <button class="btn is-lg">大きめ</button>
  <button class="btn is-xl">大きい</button>
  <button class="btn is-xxl">特大</button>
</div>

<div class="btns is-xxs">
  <button class="btn">まとめて極小</button>
  <button class="btn">まとめて極小</button>
  <button class="btn">まとめて極小</button>
  <button class="btn">まとめて極小</button>
  <button class="btn">まとめて極小</button>
</div>
Add Class.is-xxs.is-xs.is-sm.is-md.is-lg.is-xl.is-xxl
Change Size62.5%75%87.5%100%125%150%200%

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

62.5%

.is-mobile-xxs

.is-fablet-xxs

.is-tablet-xxs

.is-desktop-xxs

.is-wide-xxs

75%

.is-mobile-xs

.is-fablet-xs

.is-tablet-xs

.is-desktop-xs

.is-wide-xs

87.5%

.is-mobile-sm

.is-fablet-sm

.is-tablet-sm

.is-desktop-sm

.is-wide-sm

100%

.is-mobile-md

.is-fablet-md

.is-tablet-md

.is-desktop-md

.is-wide-md

125%

.is-mobile-lg

.is-fablet-lg

.is-tablet-lg

.is-desktop-lg

.is-wide-lg

150%

.is-mobile-xl

.is-fablet-xl

.is-tablet-xl

.is-desktop-xl

.is-wide-xl

200%

.is-mobile-xxl

.is-fablet-xxl

.is-tablet-xxl

.is-desktop-xxl

.is-wide-xxl

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

62.5%

.is-mobile-only-xxs

.is-fablet-only-xxs

.is-tablet-only-xxs

.is-desktop-only-xxs

75%

.is-mobile-only-xs

.is-fablet-only-xs

.is-tablet-only-xs

.is-desktop-only-xs

87.5%

.is-mobile-only-sm

.is-fablet-only-sm

.is-tablet-only-sm

.is-desktop-only-sm

100%

.is-mobile-only-md

.is-fablet-only-md

.is-tablet-only-md

.is-desktop-only-md

125%

.is-mobile-only-lg

.is-fablet-only-lg

.is-tablet-only-lg

.is-desktop-only-lg

150%

.is-mobile-only-xl

.is-fablet-only-xl

.is-tablet-only-xl

.is-desktop-only-xl

200%

.is-mobile-only-xxl

.is-fablet-only-xxl

.is-tablet-only-xxl

.is-desktop-only-xxl

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

62.5%

.is-mobile-fablet-xxs

.is-mobile-tablet-xxs

.is-mobile-desktop-xxs

75%

.is-mobile-fablet-xs

.is-mobile-tablet-xs

.is-mobile-desktop-xs

87.5%

.is-mobile-fablet-sm

.is-mobile-tablet-sm

.is-mobile-desktop-sm

100%

.is-mobile-fablet-md

.is-mobile-tablet-md

.is-mobile-desktop-md

125%

.is-mobile-fablet-lg

.is-mobile-tablet-lg

.is-mobile-desktop-lg

150%

.is-mobile-fablet-xl

.is-mobile-tablet-xl

.is-mobile-desktop-xl

200%

.is-mobile-fablet-xxl

.is-mobile-tablet-xxl

.is-mobile-desktop-xxl

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

62.5%

.is-landscape-xxs

.is-portrait-xxs

75%

.is-landscape-xs

.is-portrait-xs

87.5%

.is-landscape-sm

.is-portrait-sm

100%

.is-landscape-md

.is-portrait-md

125%

.is-landscape-lg

.is-portrait-lg

150%

.is-landscape-xl

.is-portrait-xl

200%

.is-landscape-xxl

.is-portrait-xxl

Flex

ボタン幅を変更するには .btn に .is-(xxxx)-(yy) 形式の幅を表す class を付与します。幅は設定してあるメディアクエリごとに指定可能です。

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

余白を埋め等分

.is-mobile-0

.is-fablet-0

.is-tablet-0

.is-desktop-0

.is-wide-0

100%に広がる

.is-mobile-full

.is-fablet-full

.is-tablet-full

.is-desktop-full

.is-wide-full

元のサイズを保持

.is-mobile-auto

.is-fablet-auto

.is-tablet-auto

.is-desktop-auto

.is-wide-auto

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

余白を埋め等分

.is-mobile-only-0

.is-fablet-only-0

.is-tablet-only-0

.is-desktop-only-0

100%に広がる

.is-mobile-only-full

.is-fablet-only-full

.is-tablet-only-full

.is-desktop-only-full

元のサイズを保持

.is-mobile-only-auto

.is-fablet-only-auto

.is-tablet-only-auto

.is-desktop-only-auto

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

余白を埋め等分

.is-mobile-fablet-0

.is-mobile-tablet-0

.is-mobile-desktop-0

100%に広がる

.is-mobile-fablet-full

.is-mobile-tablet-full

.is-mobile-desktop-full

元のサイズを保持

.is-mobile-fablet-auto

.is-mobile-tablet-auto

.is-mobile-desktop-auto

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

余白を埋め等分

.is-landscape-0

.is-portrait-0

100%に広がる

.is-landscape-full

.is-portrait-full

元のサイズを保持

.is-landscape-auto

.is-portrait-auto

Position

.btns に class .is-left .is-center .is-right を付与することでボタンの寄せる方向を変化させられます。

<div class="btns is-left">...</div>

<div class="btns is-center">...</div>

<div class="btns is-right">...</div>

Bar

.btns に class .is-bar を付与することで子要素のボタンを連結させられます。

<div class="btns is-bar">
  <button class="btn is-plain">...</button>
  <button class="btn is-plain">...</button>
  <button class="btn is-plain">...</button>
</div>
Last Updated: 11/6/2018, 1:24:05 AM

← List →