自分専用カスタマイズ!汎用ボタンクラスのカスタマイズ方法

自分専用カスタマイズ!汎用ボタンクラスのカスタマイズ方法

yStandardで用意された「つけるだけでボタンっぽくなる!」というクラスをカスタマイズするためのTipsです。

ボタンの見た目はそのままに、色だけ変えることのできるクラスを使って、自分専用ボタンを作る方法を紹介します!

自分専用ボタンを作る

yStandardで用意された「つけるだけでボタンっぽくなる!」というクラスのカスタマイズ方法です。

ボタン作成用クラスについては次の記事をご覧ください。

「つけるだけでボタンっぽくなる」クラスはys-buttonys-button-darkの2種類がありますが、その他に、カスタマイズを前提としたクラスys-button-originがあります。

ys-button-originでは枠線や余白、角丸具合などは定義されていますが、色に関する指定が全くされていません。

このys-button-originに加えて、ボタンの色を定義したクラスを用意することでオリジナルのボタンを作ることが出来ます。

オリジナルボタン作り方

まずは完成図から。

<!-- ys-button-origin + blue-button -->
<a class="ys-button-origin blue-button" href="#">おりじなるボタンサンプル</a>

出来上がりイメージは上のようなコードになります。

ys-button-originに直接色の定義を追加するのではなく、色に関する定義をしたblue-buttonというクラスを組み合わせています。

こうすることによってys-button-originクラスを書き換えることなく何種類かのボタンを使い分けることができるようになります。

色情報追加用クラスの作り方

こちらもいきなり完成形から

.blue-button a,
a.blue-button {
  border-color: #4DA2E8;
  background-color: #4DA2E8;
    color:#fff;
}
.blue-button a:hover,
a.blue-button:hover {
  border-color: #4DA2E8;
  background-color: #fff;
  color: #4DA2E8;
}

こちらを参考にして頂く場合はblue-buttonと各色の指定をご自身のカスタマイズ内容に合わせて変えていただければと思います!

オリジナルボタンへとカスタマイズ

上のコードだとこのようなTwitter風ボタンが出来ました!

サイト内で何種類かボタンを用意したい場合などに使えるかと思いますので、ぜひ活用していただければと思います!