プライマリボタンの変え方

【THE・THOR】(ザ・トール )プライマリボタンをカスタマイズする方法

あなたはプライマリボタンを使っていますか?

これですこれ↓

実はこれ、自分好みにカスタマイズすることが出来るんですよ🎵

この記事では、その方法をお伝えしていきます。

3分くらいで設定し終わると思うので、気軽にやってみてください。


【THE・THOR】(ザ・トール )でプライマリボタンをカスタマイズする方法【画像で解説】

「外観」から「カスタマイズ」をクリックする。

カスタマイズボタン

「パーツスタイル設定[THE]」をクリックする。

パーツスタイル設定

「共通ボタン設定(全ページ用)」をクリックする。

共通ボタン設定

文字の色と背景の色はここから簡単に変えることができます。

共通ボタン

文字色と背景色を変えたいだけの場合は、ここだけの設定のみで十分です。

もし、こんな風にアレンジを加えたいのであれば、CSSをいじる必要があります。

※方法をお伝えしますが、ここからは自己責任でお願いします。


【THE・THOR】(ザ・トール )プライマリボタンをカスタマイズする方法【アレンジ編】

「外観」から「カスタマイズ」をクリックする。

カスタマイズ

下にスクロールして「追加CSS」をクリックします。

追加CSS

ここにCSSを記述していきます。

ホバーしたら。。。
.btn__link-primary {  background: #FF773E;  color: #fff;  border: px solid ;  padding: 14px 30px;}.btn__link-primary:hover {  background: #fff;  opacity: 0.7;  border: 1px solid orangered;  border-style:dashed;  border-radius: 30px;  color: orangered;}

このCSSは、ホバー(ボタンの上にカーソル・指を置くこと)したらボタンが破線になるアレンジです。

こんな感じで、プライマリボタンを自分の好みにカスタマイズすることが出来ます。

HTMLやCSSの知識があれば、もっと色々なボタンを作ることが出来ますよ🎵

興味が湧いた方はぜひこちらの記事も見てみてください。

記事はいかがでしたか?

最後まで
読んでくれたあなたが大好きです^ ^

ぜひコメントお待ちしております⇨このエントリーをはてなブックマークに追加

スポンサードリンク