クラスをつけるだけ!yStandard汎用ボタンクラスについて

yStandardでは「つけるだけでボタンっぽくなる!」というクラスを用意しています。

ボタンの見た目は2種類、かつ文字数に応じた長さのものと1行ボタンの計4種類をクラスの組み合わせで作ることが可能です!

つけるだけでボタンっぽくなる汎用クラス

yStandardでは簡単にボタンっぽい表示のリンクを作るために次のようなクラスを用意しています

  • ys-button
  • ys-button-dark

(これに加え、オリジナルボタン作成用のクラスys-button-originがあります。使い方についてはこちらをご覧ください)

明るいボタン

クラスをつけるだけでできる明るいボタンの例

ys-buttonaタグ、もしくはaタグを囲む要素のクラスにつけることでリンクを白メインのボタンにすることが出来ます

コード例

<!-- aタグを囲む要素にクラスつけた場合  -->
<p class="ys-button"><a href="#">ボタンっぽいリンク</a></p>

<!-- aタグにクラスつけた場合 -->
<a class="ys-button" href="#">ボタンっぽいリンク</a>

サンプル

ボタンっぽいリンク

暗いボタン

クラスをつけるだけでできるくらいボタンの例

明るいボタンと同じように、ys-button-darkaタグ、もしくはaタグを囲む要素のクラスにつけることでリンクを濃い目のグレーボタンにすることが出来ます

コード例

<!-- aタグを囲む要素にクラスつけた場合  -->
<p class="ys-button-dark"><a href="#">ボタンっぽいリンク</a></p>

<!-- aタグにクラスつけた場合 -->
<a class="ys-button-dark" href="#">ボタンっぽいリンク</a>

サンプル

ボタンっぽいリンク

1行ボタンを作る

クラスを追加してできる1行ボタンの例

ys-buttonys-button-darkに加えてys-button-blockクラスを追加することで、1行分領域を使った大きなボタンを作ることが出来ます。

コード例

<p class="ys-button ys-button-block"><a href="#">ボタンっぽいリンク</a></p>

<a class="ys-button-dark ys-button-block" href="#">ボタンっぽいリンク</a>

サンプル

ボタンっぽいリンク

ボタンっぽいリンク

ボタンの色を自分のブログにあわせてカスタマイズしたい

ボタンの見た目だけ定義して、色を定義していないys-button-originというクラスを使うことで、自分色にカスタマイズしたボタンを作ることが可能です。

詳しくは次の記事をご覧ください