40種類以上のボタンを用意

この記事はSANGOカスタマイズガイドの「ボタンの挿入方法と種類一覧」を一部転載したものです。

SANGOオリジナルボタン一覧

ボタンデザイン

ここからSANGOで使えるオリジナルデザインのボタンを一覧で紹介していきます。

1. 浮き出しボタン

浮き出しボタンはマテリアルデザインでよく使われるボタンです(参考:マテリアルデザインとは?)。Googleのサービスなどでよく見かけますね。以下の5色の中から選んで使うことができます。

1-1.メインカラーを背景色に

BUTTON

カスタマイザー(ダッシュボード外観カスタマイズ)で設定した「メインカラー」がボタンの背景色となります。
[btn href="リンク先のURL" class="raised main-bc strong"]ボタンテキスト[/btn]

1-2.アクセントカラーを背景色に

BUTTON

下記のショートコードを使うと、カスタマイザーで設定したアクセントカラーを背景色とした浮き出しボタンが挿入されます。

[btn href="リンク先のURL" class="raised accent-bc strong"]ボタンテキスト[/btn]

1-3.浮き出しボタン(赤)

BUTTON

ここからの3つはSANGOのテーマであらかじめ設定されている背景色です。
[btn href="リンク先のURL" class="raised red-bc strong"]ボタンテキスト[/btn]

1-4.浮き出しボタン(青)

BUTTON

[btn href="リンク先のURL" class="raised blue-bc strong"]ボタンテキスト[/btn]

1-5.浮き出しボタン(緑)

BUTTON

[btn href="リンク先のURL" class="raised green-bc strong"]ボタンテキスト[/btn]

CatNose

ちなみにclassの中のstrongを消すとボタンテキストが太字ではなく、通常の太さになります。

3. テキストボタン

テキストボタンはシンプルなテキストだけのボタンです。ただし、テキストまわりの余白が少し広めに取られており、ホバー時(カーソルを上に重ねたとき)にはうっすらと灰色の背景色がつきます。

3-1.リンク色

通常のリンク色がそのまま使われます。

BUTTON

[btn href="リンク先のURL" class="btntext strong"]ボタンテキスト[/btn]

3-2. メインカラー

カスタマイザーで登録したメインカラーが使われます。

BUTTON

[btn href="リンク先のURL" class="btntext strong main-c"]ボタンテキスト[/btn]

3-3. アクセントカラー

カスタマイザーで登録したアクセントカラーが使われます。

BUTTON

[btn href="リンク先のURL" class="btntext strong  accent-c"]ボタンテキスト[/btn]

参考. FontAwesomeでアイコンを使う

BUTTON

このボタンに限ったことではありませんが、ボタンテキストの部分にFontAwesomeのコードを記入することでアイコンを使うこともできます。ただし、ビジュアルエディタではなく、テキストエディタの方からアイコンのコードを入力する必要があることに注意しましょう。
[btn href="リンク先のURL" class="btntext strong accent-c"]<i class="fa fa-cloud-download"></i> ボタンテキスト[/btn]

5. フラットなボタン

ここからは少し個性的なデザインのボタンとなります。どれもホバー(カーソルを上に重ねたとき)にちょっとした変化があるのでぜひチェックしてみてください。

5-1.塗りつぶし

BUTTON

[btn href="リンク先のURL" class="flat1"]ボタンテキスト[/btn]

5-2.シンプルな枠ボタン

BUTTON

[btn href="リンク先のURL" class="flat2"]ボタンテキスト[/btn]

5-3.二重線囲み

BUTTON

[btn href="リンク先のURL" class="flat3"]ボタンテキスト[/btn]

5-4.破線⇒ホバーでドットに

BUTTON

[btn href="リンク先のURL" class="flat4"]ボタンテキスト[/btn]

5-5.ホバーで塗りつぶし

BUTTON

[btn href="リンク先のURL" class="flat5"]ボタンテキスト[/btn]

5-6.両端線ボタン

BUTTON

[btn href="リンク先のURL" class="flat6"]ボタンテキスト[/btn]

5-7.下線ボタン

BUTTON

[btn href="リンク先のURL" class="flat7"]ボタンテキスト[/btn]

5-8.右側が丸いボタン

BUTTON

[btn href="リンク先のURL" class="flat8"]ボタンテキスト[/btn]

5-9.塗りつぶしボタン

BUTTON

[btn href="リンク先のURL" class="flat9"]ボタンテキスト[/btn]

5-10.上がまるいボタン

BUTTON

[btn href="リンク先のURL" class="flat10"]ボタンテキスト[/btn]

5-11.ストライプ&両端線

BUTTON

[btn href="リンク先のURL" class="flat11"]ボタンテキスト[/btn]

6. グラデーションボタン

6-1.青と水色のグラデーション

BUTTON

[btn href="リンク先のURL" class="grad1"]ボタンテキスト[/btn]

6-2.赤と黄のグラデーション

BUTTON

[btn href="リンク先のURL" class="grad2"]ボタンテキスト[/btn]

6-3.丸みをつけた場合

BUTTON

[btn href="リンク先のURL" class="grad3"]ボタンテキスト[/btn]

6-4.角の丸みなし

BUTTON

[btn href="リンク先のURL" class="grad4"]ボタンテキスト[/btn]

7. 立体的なボタン

7-1.厚みのあるボタン(メインカラー)

BUTTON

[btn href="リンク先のURL" class="cubic1 main-bc"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic1 accent-bc"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 red-bc"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 blue-bc"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 green-bc"]ボタンテキスト[/btn]

7-2.影をつけたタイプ

BUTTON

[btn href="リンク先のURL" class="cubic1 main-bc shadow"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic1 accent-bc shadow"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 red-bc shadow"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 blue-bc shadow"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 green-bc shadow"]ボタンテキスト[/btn]

7-3.文字をエンボスにしたタイプ

BUTTON

[btn href="リンク先のURL" class="cubic1 main-bc shadow emboss"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic1 accent-bc shadow emboss"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 red-bc shadow emboss"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 blue-bc shadow emboss"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 green-bc shadow emboss"]ボタンテキスト[/btn]

7-4.文字が浮き出るタイプ

BUTTON

[btn href="リンク先のURL" class="cubic1 main-bc shadow text3d"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic1 accent-bc shadow text3d"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 red-bc shadow text3d"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 blue-bc shadow text3d"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic1 green-bc shadow text3d"]ボタンテキスト[/btn]

7-5.カクカクとしたボタン(メインカラー)

BUTTON

[btn href="リンク先のURL" class="cubic2 main-bc"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic2 accent-bc"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic2 red-bc"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic2 blue-bc"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic2 green-bc"]ボタンテキスト[/btn]

7-5.少しポップなボタン(メインカラー)

BUTTON

[btn href="リンク先のURL" class="cubic3 main-bc"]ボタンテキスト[/btn]

アクセントカラーの場合

BUTTON

[btn href="リンク先のURL" class="cubic3 accent-bc"]ボタンテキスト[/btn]

赤の場合

BUTTON

[btn href="リンク先のURL" class="cubic3 red-bc"]ボタンテキスト[/btn]

青の場合

BUTTON

[btn href="リンク先のURL" class="cubic3 blue-bc"]ボタンテキスト[/btn]

緑の場合

BUTTON

[btn href="リンク先のURL" class="cubic3 green-bc"]ボタンテキスト[/btn]