THE THOR(ザ・トール)のボタンデザインのサンプルです。デフォルトパーツからカスタマイズできるボタンのデザインを一覧でまとめています。
予め用意されているボタン
予めTHE THORに用意されているボタンです。「スタイル」＞「ボタン」から設置できます。
カスタマイズメニューから内容を変更できるので、使わないものがあれば自作ボタンのクラスを登録しておきましょう。
デフォルトパーツ
ボタンのデフォルトパーツは「スタイル」＞「デフォルトパーツ」＞「ボタン」から設置できます。
ボタン内ボタンやカラーセットでの色変更は可能ですが、事前にボタン内にテキストを入力しておく必要があります。
基本的なボタン
立体
立体ボタンは、ボタンに立体感を追加できます。
薄影
薄影ボタンは、何も変化が起こりませんでした。
影+光
影+光ボタンは、何も変化が起こりませんでした。
右矢印
右矢印ボタンは、ボタンの右側に矢印を追加できます。
アイコンボタン
アイコン (余白)
ep-btn es-BTicon icon-wordpress
アイコン (余白)ボタンは、ボタンの左側にアイコンを追加できます。アイコンはアイコンオプションからコードを選び、アイコン挿入で入れる必要があります。
アイコン (ボーダー)
ep-btn es-BTiconBorder icon-wordpress
アイコン (ボーダー)ボタンは、ボタンの左側にアイコンを追加できます。アイコンはアイコンオプションからコードを選び、アイコン挿入で入れる必要があります。
アイコン (ボックス)
ep-btn es-BTiconBox icon-wordpress
アイコン (ボックス)ボタンは、アイコンはアイコンオプションからコードを選び、アイコン挿入で入れる必要があります。
アイコン (サークル)
ep-btn es-BTiconCircle icon-wordpress
アイコン (サークル)ボタンは、アイコンはアイコンオプションからコードを選び、アイコン挿入で入れる必要があります。
カスタマイズしたボタンサンプル
デフォルトのままだと全くボタンに見えないので、いくつかカスタマイズしたボタンを紹介します。
youtube風
ep-btn ftc-white bgc-DPred es-Fbig
You Tubeのチャンネル登録ボタン風なボタンデザインです。ボタン感無いですが、本家も変えない不思議なデザインですね。
Amazonプライム風
ep-btn es-BTicon icon-play3 ftc-white bgc-DPsky es-Fbig es-center es-radius
Amazonプライムで1話を再生するボタン風なボタンデザインです。アイコンサイズや文字の位置などは、CSSで調整すれば同一のものが作れそうですね。
