この記事はSANGOカスタマイズガイドの「ボタンの挿入方法と種類一覧」を一部転載したものです。
目次
SANGOオリジナルボタン一覧
ここからSANGOで使えるオリジナルデザインのボタンを一覧で紹介していきます。
1. 浮き出しボタン
浮き出しボタンはマテリアルデザインでよく使われるボタンです（参考：マテリアルデザインとは？）。Googleのサービスなどでよく見かけますね。以下の5色の中から選んで使うことができます。
1-1.メインカラーを背景色に
カスタマイザー（ダッシュボード外観カスタマイズ）で設定した「メインカラー」がボタンの背景色となります。[btn href="リンク先のURL" class="raised main-bc strong"]ボタンテキスト[/btn]1-2.アクセントカラーを背景色に
下記のショートコードを使うと、カスタマイザーで設定したアクセントカラーを背景色とした浮き出しボタンが挿入されます。
[btn href="リンク先のURL" class="raised accent-bc strong"]ボタンテキスト[/btn]1-3.浮き出しボタン（赤）
ここからの3つはSANGOのテーマであらかじめ設定されている背景色です。[btn href="リンク先のURL" class="raised red-bc strong"]ボタンテキスト[/btn]1-4.浮き出しボタン（青）
[btn href="リンク先のURL" class="raised blue-bc strong"]ボタンテキスト[/btn]1-5.浮き出しボタン（緑）
[btn href="リンク先のURL" class="raised green-bc strong"]ボタンテキスト[/btn]
CatNose
ちなみにclassの中のstrongを消すとボタンテキストが太字ではなく、通常の太さになります。
2.リップルエフェクト付浮き出しボタン
リップルエフェクトとは、タップしたときに波紋が広がるようなエフェクトのことです。こちらもマテリアルデザインでよく使われます。SANGOでは、Ripplerと呼ばれるjQueryプラグインをあらかじめ導入したおり、簡単にリップルエフェクトをボタンに加えることができます。 リップルエフェクトを適用するのは簡単で、クラス名（class）に"rippler rippler-default"と加えるだけです。
ただし、リップルエフェクトを使用する場合にはリンク先を別タブで開くtarget="_blank"を使うことが出来ない点にご注意ください。
MEMO
エフェクトのかかり方の種類は切り替えることができます。詳しくは、Ripplerのデモページをチェックしてみてください。 TIPS
リップルエフェクトを使わない、という場合には、少しでも軽くするために（外観カスタマイズ詳細設定）からリップルエフェクトをオフにすることをおすすめします。2-1. サンプルとショートコード
下の5つのボタンには全てリップルエフェクトが適用されています。ぜひクリックorタップしてみてください。
BUTTON BUTTON BUTTON BUTTON BUTTONこのボタンのコードはそれぞれ以下のようになります。長いのでコピペして使うのがおすすめです。WordPressプラグイン「AddQuickTag」に登録しておいても良いでしょう。
↓メインカラー
[btn href="リンク先のURL" class="raised main-bc strong rippler rippler-default"]ボタンテキスト[/btn]
↓アクセントカラー
[btn href="リンク先のURL" class="raised accent-bc strong rippler rippler-default"]ボタンテキスト[/btn]
↓赤
[btn href="リンク先のURL" class="raised red-bc strong rippler rippler-default"]ボタンテキスト[/btn]
↓青
[btn href="リンク先のURL" class="raised blue-bc strong rippler rippler-default"]ボタンテキスト[/btn]
↓緑
[btn href="リンク先のURL" class="raised green-bc strong rippler rippler-default"]ボタンテキスト[/btn]
3. テキストボタン
テキストボタンはシンプルなテキストだけのボタンです。ただし、テキストまわりの余白が少し広めに取られており、ホバー時（カーソルを上に重ねたとき）にはうっすらと灰色の背景色がつきます。
3-1.リンク色
通常のリンク色がそのまま使われます。
[btn href="リンク先のURL" class="btntext strong"]ボタンテキスト[/btn]
3-2. メインカラー
カスタマイザーで登録したメインカラーが使われます。
[btn href="リンク先のURL" class="btntext strong main-c"]ボタンテキスト[/btn]
3-3. アクセントカラー
カスタマイザーで登録したアクセントカラーが使われます。
[btn href="リンク先のURL" class="btntext strong accent-c"]ボタンテキスト[/btn]
参考. FontAwesomeでアイコンを使う
このボタンに限ったことではありませんが、ボタンテキストの部分にFontAwesomeのコードを記入することでアイコンを使うこともできます。ただし、ビジュアルエディタではなく、テキストエディタの方からアイコンのコードを入力する必要があることに注意しましょう。[btn href="リンク先のURL" class="btntext strong accent-c"]<i class="fa fa-cloud-download"></i> ボタンテキスト[/btn]
4. リップルエフェクト付テキストボタン
BUTTON BUTTON BUTTONリップルエフェクト付きのテキストボタンにするショートコードは以下のようになります。
↓通常のリンク色
[btn href="リンク先のURL" class="btntext strong rippler rippler-inverse"]ボタンテキスト[/btn]
↓メインカラー
[btn href="リンク先のURL" class="btntext strong main-c rippler rippler-inverse"]ボタンテキスト[/btn]
↓アクセントカラー
[btn href="リンク先のURL" class="btntext strong accent-c rippler rippler-inverse"]ボタンテキスト[/btn]
5. フラットなボタン
ここからは少し個性的なデザインのボタンとなります。どれもホバー（カーソルを上に重ねたとき）にちょっとした変化があるのでぜひチェックしてみてください。
5-1.塗りつぶし
[btn href="リンク先のURL" class="flat1"]ボタンテキスト[/btn]
5-2.シンプルな枠ボタン
[btn href="リンク先のURL" class="flat2"]ボタンテキスト[/btn]
5-3.二重線囲み
[btn href="リンク先のURL" class="flat3"]ボタンテキスト[/btn]
5-4.破線⇒ホバーでドットに
[btn href="リンク先のURL" class="flat4"]ボタンテキスト[/btn]
5-5.ホバーで塗りつぶし
[btn href="リンク先のURL" class="flat5"]ボタンテキスト[/btn]
5-6.両端線ボタン
[btn href="リンク先のURL" class="flat6"]ボタンテキスト[/btn]
5-7.下線ボタン
[btn href="リンク先のURL" class="flat7"]ボタンテキスト[/btn]
5-8.右側が丸いボタン
[btn href="リンク先のURL" class="flat8"]ボタンテキスト[/btn]
5-9.塗りつぶしボタン
[btn href="リンク先のURL" class="flat9"]ボタンテキスト[/btn]
5-10.上がまるいボタン
[btn href="リンク先のURL" class="flat10"]ボタンテキスト[/btn]
5-11.ストライプ&両端線
[btn href="リンク先のURL" class="flat11"]ボタンテキスト[/btn]
6. グラデーションボタン
6-1.青と水色のグラデーション
[btn href="リンク先のURL" class="grad1"]ボタンテキスト[/btn]
6-2.赤と黄のグラデーション
[btn href="リンク先のURL" class="grad2"]ボタンテキスト[/btn]
6-3.丸みをつけた場合
[btn href="リンク先のURL" class="grad3"]ボタンテキスト[/btn]
6-4.角の丸みなし
[btn href="リンク先のURL" class="grad4"]ボタンテキスト[/btn]
7. 立体的なボタン
7-1.厚みのあるボタン（メインカラー）
[btn href="リンク先のURL" class="cubic1 main-bc"]ボタンテキスト[/btn]
アクセントカラーの場合
[btn href="リンク先のURL" class="cubic1 accent-bc"]ボタンテキスト[/btn]
赤の場合
[btn href="リンク先のURL" class="cubic1 red-bc"]ボタンテキスト[/btn]
青の場合
[btn href="リンク先のURL" class="cubic1 blue-bc"]ボタンテキスト[/btn]
緑の場合
[btn href="リンク先のURL" class="cubic1 green-bc"]ボタンテキスト[/btn]
7-2.影をつけたタイプ
[btn href="リンク先のURL" class="cubic1 main-bc shadow"]ボタンテキスト[/btn]
アクセントカラーの場合
[btn href="リンク先のURL" class="cubic1 accent-bc shadow"]ボタンテキスト[/btn]
赤の場合
[btn href="リンク先のURL" class="cubic1 red-bc shadow"]ボタンテキスト[/btn]
青の場合
[btn href="リンク先のURL" class="cubic1 blue-bc shadow"]ボタンテキスト[/btn]
緑の場合
[btn href="リンク先のURL" class="cubic1 green-bc shadow"]ボタンテキスト[/btn]
7-3.文字をエンボスにしたタイプ
[btn href="リンク先のURL" class="cubic1 main-bc shadow emboss"]ボタンテキスト[/btn]
アクセントカラーの場合
[btn href="リンク先のURL" class="cubic1 accent-bc shadow emboss"]ボタンテキスト[/btn]
赤の場合
[btn href="リンク先のURL" class="cubic1 red-bc shadow emboss"]ボタンテキスト[/btn]
青の場合
[btn href="リンク先のURL" class="cubic1 blue-bc shadow emboss"]ボタンテキスト[/btn]
緑の場合
[btn href="リンク先のURL" class="cubic1 green-bc shadow emboss"]ボタンテキスト[/btn]
7-4.文字が浮き出るタイプ
[btn href="リンク先のURL" class="cubic1 main-bc shadow text3d"]ボタンテキスト[/btn]
アクセントカラーの場合
[btn href="リンク先のURL" class="cubic1 accent-bc shadow text3d"]ボタンテキスト[/btn]
赤の場合
[btn href="リンク先のURL" class="cubic1 red-bc shadow text3d"]ボタンテキスト[/btn]
青の場合
[btn href="リンク先のURL" class="cubic1 blue-bc shadow text3d"]ボタンテキスト[/btn]
緑の場合
[btn href="リンク先のURL" class="cubic1 green-bc shadow text3d"]ボタンテキスト[/btn]
7-5.カクカクとしたボタン（メインカラー）
[btn href="リンク先のURL" class="cubic2 main-bc"]ボタンテキスト[/btn]
アクセントカラーの場合
[btn href="リンク先のURL" class="cubic2 accent-bc"]ボタンテキスト[/btn]
赤の場合
[btn href="リンク先のURL" class="cubic2 red-bc"]ボタンテキスト[/btn]
青の場合
[btn href="リンク先のURL" class="cubic2 blue-bc"]ボタンテキスト[/btn]
緑の場合
[btn href="リンク先のURL" class="cubic2 green-bc"]ボタンテキスト[/btn]
7-5.少しポップなボタン（メインカラー）
[btn href="リンク先のURL" class="cubic3 main-bc"]ボタンテキスト[/btn]
アクセントカラーの場合
[btn href="リンク先のURL" class="cubic3 accent-bc"]ボタンテキスト[/btn]
赤の場合
[btn href="リンク先のURL" class="cubic3 red-bc"]ボタンテキスト[/btn]
青の場合
[btn href="リンク先のURL" class="cubic3 blue-bc"]ボタンテキスト[/btn]
緑の場合
[btn href="リンク先のURL" class="cubic3 green-bc"]ボタンテキスト[/btn]
