【簡単・シンプル】WordPress標準のボタンのカスタマイズ（カーソルホバー時に背景色を変える）

WordPress標準のボタンはカーソルを合わせても、うっすら色が薄くなる程度で、あまり変化しないですよね。もう少しはっきり変化を見せたいときのために、カーソルホバー時に背景色を変えるカスタマイズをご紹介いたします。

Contents

WordPress標準のボタンとは

ブロックを追加で「ボタン」をクリックし、

リンク先の設定の他に、スタイル（塗りつぶし・アウトライン）、色設定（テキスト、背景）、枠線（角丸半径）、幅の設定などが出来ます。

そうするとこんな感じになります。

カーソルを合わせてみると、うっすら色が薄くなると思います。

これをホバー時にはっきりと背景色を変えるようにカスタマイズします。

編集画面で、ボタンにカーソルを合わせた状態で、編集画面右側の一番下「高度な設定」＞「追加CSSクラス」にクラスを設定します。クラス名は何でもいいのですが、ここでは「button1」にします。

今度は、ダッシュボード左側「外観」＞「カスタマイズ」から、「追加CSS」で以下のコードを記述してください。

.button1 .has-background:hover{
	background-color: #000!important;
	transition:0.5s;
}

ホバー時に、クラス名「button1」のボタンの背景色を黒に変えるように設定しています。黒以外に変えたい場合は、background-colorの#000の部分を変えてください。
transition:0.5s　は、変化するのに0.5秒かけるという設定です。

そうすると以下のようになります。ホバー時に背景色が黒に変わると思います。

WordPress標準のボタンのホバー時の背景色を変えるカスタマイズをご紹介いたしました。

有料テーマによっては、あらかじめおしゃれなボタンが用意され、ホバー時に色が変化するものもありますが、標準のボタンでも少しのカスタマイズで、こんな感じにできますので良かったらお試しください。