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の拡張クラスをいくつか用意しています。
以下では、それら拡張...
2017-01-01 17:06
コメント
ボタンテストですが、IE、FireFoxではうまく表示されますが、Chromeだと表示されずにテキスト表示になってしまいます。
おそらくそれは、多分Chromeが古いCSSのブラウザキャッシュを読み込んでいるのが原因かと思われます。
ブラウザを一度リロードするか、それでもうまくいかない場合は、以下に書かれている方法でキャッシュを削除してみてください。
SSimplicity動作不良時のガイドライン