m-btn
リンク、インライン要素、フォームのボタン要素をボタン状に表示する。
disabled
属性が付与されていると、反応しない見た目となる(クリックはできるので注意)。
<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
ボタンを正円で表示する。幅を超えるようなテキストを入れることはできない。
<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
ボタンを正方形で表示する。幅を超えるようなテキストを入れることはできない。
<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>