MaxButtonsでホバーアクションのあるボタンを作成

ブロックエディターでは、ボタンブロックはありますが、カーソルで合わせた時に色が変化する、ホバーアクションの設定ができません。そこで今回、ボタン作成プラグインMaxButtonsで、ホバーアクションのついたボタンを作成します。ショートコードを使用するので、LPのように同じリンクボタンを繰り返し使う場合に便利です。

DEMOの1つ目は、立体感のあるグラデーションボタン、2つ目は色が反転するリバースボタン、3つ目は、ボタンの透明度が上がり、背景が透ける透過ボタンです。全て、3カラム20/60/20の中央にボタンを配置しています。

まず、共通の設定をします。左サイドバーから「MaxButtons」をクリックし、「Settings」タブをクリックします。設定画面の項目に「Aout button size on screen」があるので、設定を「100%」にして「変更を保存」をクリックします。これによりSPでは、全幅で表示されます。

項目	設定値
Aout button size on screen	100%

グラデーションボタン

では、1つ目のグラデーションボタンを例に説明していきます。左サイドメニューのMaxButtons＞AddNewをクリックします。

左サイドバーから、MaxButton＞Add Newをクリック

Basics

まず、「Button Name」にボタン名を指定します。これは、ボタン一覧画面のファイル名になるので、わかりやすい名前にしましょう。「URL」にリンク先のURLを入力し、「Text」にボタンに入る文字を指定します。今回のDEMOでは、URLを指定していません。

次に、スタイルを指定します。まず、デフォルトで「Padding」が上のみに入っているので、上下「20px」に指定し、「Button Height」を空欄にします。これで、ボタンの上下に同じパディングが入ります。

「Font」は、サイトで使っているフォントを使用するので、セレクトボックスから [Site Default] を選択し、サイズを20pxにします。PCでは、幅を固定にするため、「Button Width」を240pxに設定します。

ページの右サイドにプレビューが表示されるので、確認してOKなら次の項目に進みます。

項目	設定値
Font	[Site Default] / 20px / 中央揃え
Padding	上 20 / 下 20
Text Color	#ffffff
Text Color Hover	#ffffff
Button Width	240px
Button Height	空欄

Border

ここでは、ボタンの角丸値や、ボーダーなどの設定をします。デフォルトよりも角を丸くしたいので、「Radius」の値をロックをかけたまま、10に設定します。デフォルトのボーダーとドロップシャドウを削除するため、「Width」0px、「Shadow Blur」0に設定します。

項目	設定値
Radius	10
Width	0px
Shadow Blur	0

Background

ボタンの背景色を設定します。グラデーションにしたいので、「Use Gradients」にチェックを入れます。グラデーションは縦方向に掛かります。「Background color」で「Start」で上、「End」で下の色を設定します。「Background hover」でカーソルを合わせた時のボタンのグラデーション色を設定します。

項目	設定値
Use Gradients	チェック有
Bacground color	Start #1e73be / End #1b3faa
Bacground hover	Start #1a7fb2 / End #1767b7
Gradient Stop	45

Text Shadow

テキストの影を設定します。テキストの左下に影をつけたいので、「Shadow Offset Left」を-2に、「Shadow Offset Top」を1に設定します。「Shadow Color」は、影の色になるので、ボタン背景より濃いいろを設定します。

項目	設定値
Shadow Offset Left	-2
Shadow Offset Top	1
Shadow Blur	1
Shadow Color	#4c54bf
Hover	#1f61c4

Container

今回のDEMOでは、3カラムの中央に配置したいのですが、デフォルトだと、左寄りにレイアウトされます。Containerの「Use Container」「Center the Container」両方にチェックを入れることにより、カラムの中央に配置されます。設定が終了したら、「Save」ボタンをクリックして保存します。

これでグラデーションボタンの完成です。他の2つのボタンも、デフォルトからの変更項目を中心に説明します。

項目	設定値
Use Container	チェック有
Center the container	チェック有

リバースボタン

背景が透明から黒に、文字が黒から白に反転します。また、PCでも、カラムの幅に合わせて横幅が変わるように、横幅を100%に設定しています。

まず、横幅100%にするため、Basicsの「Button Width」を100%にします。ボーダーをつけるためBorder＞Widthを2pxに設定します。「Background color」の透過度を0、「Background hover」を黒（#000000）に設定します。中央寄せする必要がないので、「Container」は、デフォルトのまま、チェックを外しておきます。

項目	設定値
Text Color	#000000
Text Color Hover	#ffffff
Button Width	100%
Button Height	空欄
Radius	0
Border Width	2px
Border Color / Hover	#000000
Background color	透過度 0
Background hover	#000000
Use Container	チェック無
Center the container	チェック無

透過ボタン

最後に、マウスを乗せたら、ボタンの背景が透過するボタンを作成します。最近よく見かけるデザインですね。

Borderの「Radius」を50に設定します。「Background color」「Background hover」に同じ色を指定し、透過度を0.7にします。ボーダーや、グラデーションは使用しません。

項目	設定値
Text Color	#ffffff
Text Color Hover	#ffffff
Button Width	240px
Button Height	空欄
Radius	50
Background color	#d12eb8
Background hover	#d12eb8 / 透過度 0.7
Use Container	チェック有
Center the container	チェック有

設置

最後にボタンの設置です。左サイドバーのMaxButtons＞Buttonsをクリックし、ボタン一覧を表示します。「Shortcode」のショートコードをコピーして、設置したい場所にショートコードブロックを配置し、コードをペーストします。これで、完成です。

以上でMaxButtonsの説明は終了です。細かな設定はできませんが、ホバーアクションがコードを使わず、簡単に実装できる点がいいですね。