【AFFINGER】カスタムボタンをマウスオーバーで色を反転させる方法

---

---

AFFINGER の「STINGER：カスタムボタン」は便利ですね。しかし、マウスオーバーでも強調されないので若干気が付きにくい。

＼AFFINGER でオシャレサイトを作る方法は こちら をクリックしてください／

AFFINGER の「カスタムボタン」の色反転のサンプル

AFFINGER のカスタムボタンでマウスオーバーで色を反転するサンプルです。

カスタムボタンで色を反転させる

マウスオーバーで色を反転しています。

カスタムボタンで色を反転させる

マウスオーバーで色を反転しています。

パソコンで表示した場合、マウスオーバーで色を反転させています。スマホの場合はタップで他URLに移動してしまうので、ちょっとわかりにくいですね。

「カスタムボタン」の色反転を作る方法

実際に作る方法です。CSS を使って実現します。

step
1カスタムボタンを作る

AFFINGER の部品「STINGER：カスタムボタン」を使ってボタンを作ります。

色を反転させたときに全体に色が付いて見栄えをよくするために、もともとのボタンの色は枠線＋文字色で背景白のボタンに設定しています。

step
2CSS を設定する

ボタンに「クラス名」を付与する。

step
2CSS を設定する

CSS を設定して色の反転を実現します。

WordPress の管理画面から「外観」→「カスタマイズ」→「追加CSS」を選択します。

設定する CSS は以下です。

.my-custom-button-red:hover {
    background:#E92F3D !important;
}

.my-custom-button-red a{
    transition: 0s !important;
}

.my-custom-button-red:hover a{
    color : #ffffff !important;
    opacity : 1.0 !important;
}

ポイントを説明します。

※青色のボタンの場合は背景色を「 #0693E3 」に設定します。

完成です。

AFFINGER のお役立ちテクニックはこちら

まとめ：カスタムボタンをマウスオーバーで色を反転させる方法

AFFINGER のカスタムボタンでマウスオーバーで色を反転する場合は、CSS で設定します。

カスタムボタンで色を反転させる

マウスオーバーで色を反転しています。

かっこいい記事デザインでサイトを作ってくださいね。

AFFINGER の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

WordPress のテーマ「AFFINGER」の情報、テクニック一覧はこちらをクリック！

Presented By Boon Boon Blog .Com

電気通信事業法改正に伴う表記