Simplicity文字装飾のボタン拡張クラスの使い方

Simplicity2.2.1からボタン拡張クラスを追加しました。

以下では、ボタン拡張クラスの使用例を紹介します。

スポンサーリンク

様々な色のボタン

ボタン拡張クラスでは、クラス名を変更することで色や、大きさを変更することができます。

レッド

<p><a href="#" class="btn btn-red">ボタンテスト</a></p>

<p><a href="#" class="btn btn-red btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-red btn-l">ボタンテスト</a></p>

ピンク

<p><a href="#" class="btn btn-pink">ボタンテスト</a></p>

<p><a href="#" class="btn btn-pink btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-pink btn-l">ボタンテスト</a></p>

パープル

<p><a href="#" class="btn btn-purple">ボタンテスト</a></p>

<p><a href="#" class="btn btn-purple btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-purple btn-l">ボタンテスト</a></p>

ボタンテスト

ボタンテスト

ボタンテスト

ディープ

<p><a href="#" class="btn btn-deep">ボタンテスト</a></p>

<p><a href="#" class="btn btn-deep btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-deep btn-l">ボタンテスト</a></p>

インディゴ

<p><a href="#" class="btn btn-indigo">ボタンテスト</a></p>

<p><a href="#" class="btn btn-indigo btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-indigo btn-l">ボタンテスト</a></p>

ブルー

<p><a href="#" class="btn btn-blue">ボタンテスト</a></p>

<p><a href="#" class="btn btn-blue btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-blue btn-l">ボタンテスト</a></p>

ライトブルー

<p><a href="#" class="btn btn-light-blue">ボタンテスト</a></p>

<p><a href="#" class="btn btn-light-blue btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-light-blue btn-l">ボタンテスト</a></p>

シアン

<p><a href="#" class="btn btn-cyan">ボタンテスト</a></p>

<p><a href="#" class="btn btn-cyan btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-cyan btn-l">ボタンテスト</a></p>

ティール(緑色がかった青)

<p><a href="#" class="btn btn-teal">ボタンテスト</a></p>

<p><a href="#" class="btn btn-teal btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-teal btn-l">ボタンテスト</a></p>

グリーン

<p><a href="#" class="btn btn-green">ボタンテスト</a></p>

<p><a href="#" class="btn btn-green btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-green btn-l">ボタンテスト</a></p>

ライトグリーン

<p><a href="#" class="btn btn-light-green">ボタンテスト</a></p>

<p><a href="#" class="btn btn-light-green btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-light-green btn-l">ボタンテスト</a></p>

ライム

<p><a href="#" class="btn btn-lime">ボタンテスト</a></p>

<p><a href="#" class="btn btn-lime btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-lime btn-l">ボタンテスト</a></p>

イエロー

<p><a href="#" class="btn btn-yellow">ボタンテスト</a></p>

<p><a href="#" class="btn btn-yellow btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-yellow btn-l">ボタンテスト</a></p>

アンバー(琥珀色)

<p><a href="#" class="btn btn-amber">ボタンテスト</a></p>

<p><a href="#" class="btn btn-amber btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-amber btn-l">ボタンテスト</a></p>

オレンジ

<p><a href="#" class="btn btn-orange">ボタンテスト</a></p>

<p><a href="#" class="btn btn-orange btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-orange btn-l">ボタンテスト</a></p>

ディープオレンジ

<p><a href="#" class="btn btn-deep-orange">ボタンテスト</a></p>

<p><a href="#" class="btn btn-deep-orange btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-deep-orange btn-l">ボタンテスト</a></p>

ブラウン

<p><a href="#" class="btn btn-brown">ボタンテスト</a></p>

<p><a href="#" class="btn btn-brown btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-brown btn-l">ボタンテスト</a></p>

グレー

<p><a href="#" class="btn btn-grey">ボタンテスト</a></p>

<p><a href="#" class="btn btn-grey btn-m">ボタンテスト</a></p>

<p><a href="#" class="btn btn-grey btn-l">ボタンテスト</a></p>

矢印付きボタンの例

Simplicityは、Font Awesomeを利用しているので、組み合わせて利用することで、矢印付きのボタンも作成することができます。

以下は、矢印ボタンの一例です。

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-arrow-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-angle-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-caret-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-long-arrow-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-chevron-circle-right  fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-angle-double-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-arrow-circle-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-hand-o-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-arrow-circle-o-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l"><span class="fa fa-caret-square-o-right fa-fw" aria-hidden="true"></span> お申し込みはこちら</a></p>

矢印付きボタンをクラス指定で書く例

矢印付きボタンは、以下のような別の書き方もできます。この機能はv2.2.3からです。

<p><a href="#" class="btn btn-red btn-l btn-arrow-right">お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l btn-chevron-right">お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l btn-angle-right">お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l btn-caret-right">お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l btn-long-arrow-right">お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l btn-chevron-circle-right">お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l btn-angle-double-right">お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l btn-arrow-circle-right">お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l btn-hand-o-right">お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l btn-arrow-circle-o-right">お申し込みはこちら</a></p>

<p><a href="#" class="btn btn-red btn-l btn-caret-square-o-right">お申し込みはこちら</a></p>

まとめ

ボタン拡張は、なんちゃってCSSフレームワーク風になっています。

いろいろなクラスを組み合わせることで、大きさや色を変更することができます。

コンバージョン用リンクに目立つボタンなどを使用したい時などにどうぞ。

その他の装飾スタイルは以下を参照してください。

Simplicityでは、デフォルト状態で、文字装飾に使えるCSSの拡張クラスをいくつか用意しています。 以下では、それら拡張...
スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)

コメント

  1. ふじた より:

    ボタンテストですが、IE、FireFoxではうまく表示されますが、Chromeだと表示されずにテキスト表示になってしまいます。

  2. わいひら わいひら より:

    おそらくそれは、多分Chromeが古いCSSのブラウザキャッシュを読み込んでいるのが原因かと思われます。
    ブラウザを一度リロードするか、それでもうまくいかない場合は、以下に書かれている方法でキャッシュを削除してみてください。
    SSimplicity動作不良時のガイドライン