module-btn

m-btn

リンク、インライン要素、フォームのボタン要素をボタン状に表示する。
disabled 属性が付与されていると、反応しない見た目となる(クリックはできるので注意)。

m-btn m-btn

m-btn m-btn

<p>
  <a href="#" class="m-btn">m-btn</a>
  <a href="#" class="m-btn" disabled>m-btn</a>
</p>

<p>
  <span class="m-btn">m-btn</span>
  <span class="m-btn" disabled>m-btn</span>
</p>

<p>
  <input type="button" class="m-btn" value="m-btn" />
  <input type="button" class="m-btn" value="m-btn" disabled />
</p>

<p>
  <button class="m-btn">m-btn</button>
  <button class="m-btn" disabled>m-btn</button>
</p>

m-btn-(color)

ボタンの色を変更する。(color)は標準のカラーテーブルを参照。

<p>
  <a href="#" class="m-btn m-btn-gray">m-btn-gray</a>
  <a href="#" class="m-btn m-btn-gray disabled">m-btn-gray</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-first">m-btn-first</a>
  <a href="#" class="m-btn m-btn-first disabled">m-btn-first</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-second">m-btn-second</a>
  <a href="#" class="m-btn m-btn-second disabled">m-btn-second</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-third">m-btn-third</a>
  <a href="#" class="m-btn m-btn-third disabled">m-btn-third</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-fourth">m-btn-fourth</a>
  <a href="#" class="m-btn m-btn-fourth disabled">m-btn-fourth</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-info">m-btn-info</a>
  <a href="#" class="m-btn m-btn-info disabled">m-btn-info</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-important">m-btn-important</a>
  <a href="#" class="m-btn m-btn-important disabled">m-btn-important</a>
</p>

m-btn-bordered

ボタンを罫線のみの見た目にする。背景色は $body-bg ではなく transparent なので注意。
.m-btn-(color) と同時に使用することが前提となっており、罫線の色が変わる。

<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-gray">m-btn-gray</a>
  <a href="#" class="m-btn m-btn-bordered m-btn-gray disabled">m-btn-gray</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-first">m-btn-first</a>
  <a href="#" class="m-btn m-btn-bordered m-btn-first disabled">m-btn-first</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-second">m-btn-second</a>
  <a href="#" class="m-btn m-btn-bordered m-btn-second disabled">m-btn-second</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-third">m-btn-third</a>
  <a href="#" class="m-btn m-btn-bordered m-btn-third disabled">m-btn-third</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-fourth">m-btn-fourth</a>
  <a href="#" class="m-btn m-btn-bordered m-btn-fourth disabled">m-btn-fourth</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-info">m-btn-info</a>
  <a href="#" class="m-btn m-btn-bordered m-btn-info disabled">m-btn-info</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-important">m-btn-important</a>
  <a href="#" class="m-btn m-btn-bordered m-btn-important disabled">m-btn-important</a>
</p>

m-btn-inverse

ボタンの文字色と背景色を反転する。
.m-btn-bordered と同時に使用すると、罫線のみの状態で反転する。

<p style="background-color: #000; padding: 1rem 0;">
  <a href="#" class="m-btn m-btn-inverse">m-btn-inverse</a>
  <a href="#" class="m-btn m-btn-inverse" disabled>m-btn-inverse</a>
</p>
<p style="background-color: #000; padding: 1rem 0;">
  <a href="#" class="m-btn m-btn-bordered m-btn-inverse">m-btn-bordered + m-btn-inverse</a>
  <a href="#" class="m-btn m-btn-bordered m-btn-inverse" disabled>m-btn-bordered + m-btn-inverse</a>
</p>

m-btn-(size)

ボタンのサイズを変える。(size)は、 sm, lg, xl に対応している。

補足:xl, xxlの挙動

.m-btn-xl, .m-btn-xxl は、(breakpoint)が sm 以下では一段階小さくなる。

note: Behavior of xl, xxl

.m-btn-xl, .m-btn-xxl decreases by one level when (breakpoint) is less than sm.

<p>
  <a href="#" class="m-btn m-btn-first m-btn-sm">m-btn-sm</a>
  <a href="#" class="m-btn m-btn-first">default</a>
  <a href="#" class="m-btn m-btn-first m-btn-lg">m-btn-lg</a>
  <a href="#" class="m-btn m-btn-first m-btn-xl">m-btn-xl</a>
  <a href="#" class="m-btn m-btn-first m-btn-xxl">m-btn-xl</a>
</p>

m-btn-block

ボタンを中央に寄せたブロック要素として表示する。幅は100%ではなく、一般的に考えられる幅を最大値とする。

補足:ボタンの余白

.m-btn-block, .m-btn-round, .m-btn-square では、.m-btn のpaddingの初期値を上書きする必要があるため、意図的にクラスを追加して優先度を上げている。

note: Padding in button

In .m-btn-block, .m-btn-round, .m-btn-square, need to override the default padding of .m-btn. For this reason, intentionally add classes to increase priority.

<p>
  <a href="#" class="m-btn m-btn-first m-btn-sm m-btn-block">m-btn-block</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-block">m-btn-block</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-lg m-btn-block">m-btn-block</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-xl m-btn-block">m-btn-block</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-xxl m-btn-block">m-btn-block</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-first m-btn-sm m-btn-block">m-btn-block</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-first m-btn-block">m-btn-block</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-first m-btn-lg m-btn-block">m-btn-block</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-first m-btn-xl m-btn-block">m-btn-block</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-bordered m-btn-first m-btn-xxl m-btn-block">m-btn-block</a>
</p>

m-btn-oval

ボタンを小判型にする。

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-gray">m-btn-gray</a>
  <a href="#" class="m-btn m-btn-oval m-btn-gray disabled">m-btn-gray</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-first">m-btn-first</a>
  <a href="#" class="m-btn m-btn-oval m-btn-first disabled">m-btn-first</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-second">m-btn-second</a>
  <a href="#" class="m-btn m-btn-oval m-btn-second disabled">m-btn-second</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-third">m-btn-third</a>
  <a href="#" class="m-btn m-btn-oval m-btn-third disabled">m-btn-third</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-fourth">m-btn-fourth</a>
  <a href="#" class="m-btn m-btn-oval m-btn-fourth disabled">m-btn-fourth</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-info">m-btn-info</a>
  <a href="#" class="m-btn m-btn-oval m-btn-info disabled">m-btn-info</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-important">m-btn-important</a>
  <a href="#" class="m-btn m-btn-oval m-btn-important disabled">m-btn-important</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-gray">m-btn-gray</a>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-gray disabled">m-btn-gray</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-first">m-btn-first</a>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-first disabled">m-btn-first</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-second">m-btn-second</a>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-second disabled">m-btn-second</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-third">m-btn-third</a>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-third disabled">m-btn-third</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-fourth">m-btn-fourth</a>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-fourth disabled">m-btn-fourth</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-info">m-btn-info</a>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-info disabled">m-btn-info</a>
</p>

<p>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-important">m-btn-important</a>
  <a href="#" class="m-btn m-btn-oval m-btn-bordered m-btn-important disabled">m-btn-important</a>
</p>

m-btn-round

ボタンを正円で表示する。幅を超えるようなテキストを入れることはできない。

R

R

R

R

R

<p>
  <a href="#" class="m-btn m-btn-first m-btn-sm m-btn-round">R</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-round">R</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-lg m-btn-round">R</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-xl m-btn-round">R</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-xxl m-btn-round">R</a>
</p>

m-btn-square

ボタンを正方形で表示する。幅を超えるようなテキストを入れることはできない。

R

R

R

R

R

<p>
  <a href="#" class="m-btn m-btn-first m-btn-sm m-btn-square">R</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-square">R</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-lg m-btn-square">R</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-xl m-btn-square">R</a>
</p>
<p>
  <a href="#" class="m-btn m-btn-first m-btn-xxl m-btn-square">R</a>
</p>