【THE THOR】ボタンデザイン一覧

THE THOR(ザ・トール)のボタンデザインのサンプルです。デフォルトパーツからカスタマイズできるボタンのデザインを一覧でまとめています。

予め用意されているボタン

オレンジ100%ポタン

グリーンシャドウ100%ボタン

ブルーボーダーボタン

プルーグラデポタン

ピンクアイコンボタン

ピンクグラデアイコンボタン

グリーン立体アイコンポタン

グレーラウンドアイコンポタン

サークルアイコンボタン

ボックスアイコンボタン

予めTHE THORに用意されているボタンです。「スタイル」>「ボタン」から設置できます。

カスタマイズメニューから内容を変更できるので、使わないものがあれば自作ボタンのクラスを登録しておきましょう。

デフォルトパーツ

これがデフォルトボタン

カラーセットから色が変更可能

ボタンのデフォルトパーツは「スタイル」>「デフォルトパーツ」>「ボタン」から設置できます。

ボタン内ボタンやカラーセットでの色変更は可能ですが、事前にボタン内にテキストを入力しておく必要があります。

基本的なボタン

立体

ep-btn es-BT3d

立体ボタンは、ボタンに立体感を追加できます。

薄影

ep-btn es-BTshadow

薄影ボタンは、何も変化が起こりませんでした。

影+光

ep-btn es-BTrich

影+光ボタンは、何も変化が起こりませんでした。

右矢印

ep-btn es-BTarrow

右矢印ボタンは、ボタンの右側に矢印を追加できます。

アイコンボタン

アイコン (余白)

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プライム風

エピソード1
今すぐ観る

ep-btn es-BTicon icon-play3 ftc-white bgc-DPsky es-Fbig es-center es-radius

Amazonプライムで1話を再生するボタン風なボタンデザインです。アイコンサイズや文字の位置などは、CSSで調整すれば同一のものが作れそうですね。

目次