![](https://cxg-design.jp/wp-content/uploads/2024/02/d88fc435c847e3585c592c3fc9bf68e6.png)
MaxButtonsでホバーアクションのあるボタンを作成
ブロックエディターでは、ボタンブロックはありますが、カーソルで合わせた時に色が変化する、ホバーアクションの設定ができません。そこで今回、ボタン作成プラグインMaxButtonsで、ホバーアクションのついたボタンを作成します。ショートコードを使用するので、LPのように同じリンクボタンを繰り返し使う場合に便利です。
![](https://cxg-design.jp/wp-content/uploads/2024/02/897bb36b204436392f6f773fdf2ad9b1.png)
出典 : MaxButtons
DEMOの1つ目は、立体感のあるグラデーションボタン、2つ目は色が反転するリバースボタン、3つ目は、ボタンの透明度が上がり、背景が透ける透過ボタンです。全て、3カラム20/60/20の中央にボタンを配置しています。
まず、共通の設定をします。左サイドバーから「MaxButtons」をクリックし、「Settings」タブをクリックします。設定画面の項目に「Aout button size on screen」があるので、設定を「100%」にして「変更を保存」をクリックします。これによりSPでは、全幅で表示されます。
![](https://cxg-design.jp/wp-content/uploads/2024/02/780d809b81d5422e1e03a6ceff318556.png)
項目 | 設定値 |
---|---|
Aout button size on screen | 100% |
グラデーションボタン
![](https://cxg-design.jp/wp-content/uploads/2024/02/d88fc435c847e3585c592c3fc9bf68e6.png)
では、1つ目のグラデーションボタンを例に説明していきます。左サイドメニューのMaxButtons>AddNewをクリックします。
![](https://cxg-design.jp/wp-content/uploads/2024/02/52e347114578589a08a571de845f443b.png)
左サイドバーから、MaxButton>Add Newをクリック
Basics
![](https://cxg-design.jp/wp-content/uploads/2024/02/c53782f9d16478390af1a706de1825a4.png)
まず、「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
![](https://cxg-design.jp/wp-content/uploads/2024/02/43a0851c8f50b1e36820ec8c52268ea8.png)
ここでは、ボタンの角丸値や、ボーダーなどの設定をします。デフォルトよりも角を丸くしたいので、「Radius」の値をロックをかけたまま、10に設定します。デフォルトのボーダーとドロップシャドウを削除するため、「Width」0px、「Shadow Blur」0に設定します。
項目 | 設定値 |
---|---|
Radius | 10 |
Width | 0px |
Shadow Blur | 0 |
Background
![](https://cxg-design.jp/wp-content/uploads/2024/02/67dcbc519c69d9466c31555da546f306.png)
ボタンの背景色を設定します。グラデーションにしたいので、「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
![](https://cxg-design.jp/wp-content/uploads/2024/02/b503d7836844c99b4a30741331a8e860.png)
テキストの影を設定します。テキストの左下に影をつけたいので、「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
![](https://cxg-design.jp/wp-content/uploads/2024/02/be9d25ad5697eb199e399dafd7a1a11c.png)
今回のDEMOでは、3カラムの中央に配置したいのですが、デフォルトだと、左寄りにレイアウトされます。Containerの「Use Container」「Center the Container」両方にチェックを入れることにより、カラムの中央に配置されます。設定が終了したら、「Save」ボタンをクリックして保存します。
これでグラデーションボタンの完成です。他の2つのボタンも、デフォルトからの変更項目を中心に説明します。
項目 | 設定値 |
---|---|
Use Container | チェック有 |
Center the container | チェック有 |
リバースボタン
![](https://cxg-design.jp/wp-content/uploads/2024/02/e60d9a634dda3197d30815f7c1461e08.png)
背景が透明から黒に、文字が黒から白に反転します。また、PCでも、カラムの幅に合わせて横幅が変わるように、横幅を100%に設定しています。
まず、横幅100%にするため、Basicsの「Button Width」を100%にします。ボーダーをつけるためBorder>Widthを2pxに設定します。「Background color」の透過度を0、「Background hover」を黒(#000000)に設定します。中央寄せする必要がないので、「Container」は、デフォルトのまま、チェックを外しておきます。
![](https://cxg-design.jp/wp-content/uploads/2024/02/eb81e1d736d6b04f56be4bb55a90e7bb.png)
「Button Width」を100%に設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/88c97ecf5b4f0a434c30c1d869415017.png)
「Background color」の透過度を0、「Background hover」を黒に設定。
![](https://cxg-design.jp/wp-content/uploads/2024/02/23c780daafb0ea03626ae1c781a086c0.png)
「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 | チェック無 |
透過ボタン
![](https://cxg-design.jp/wp-content/uploads/2024/02/6ff5ebb88612b8c150f12877ad472444.png)
最後に、マウスを乗せたら、ボタンの背景が透過するボタンを作成します。最近よく見かけるデザインですね。
Borderの「Radius」を50に設定します。「Background color」「Background hover」に同じ色を指定し、透過度を0.7にします。ボーダーや、グラデーションは使用しません。
![](https://cxg-design.jp/wp-content/uploads/2024/02/fc6ed075c5a0bbc3c902ba8a15012f52.png)
Border>Radiusを50に設定
![](https://cxg-design.jp/wp-content/uploads/2024/02/1da7719a28354649e9bd7dbd4c85792e.png)
「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」のショートコードをコピーして、設置したい場所にショートコードブロックを配置し、コードをペーストします。これで、完成です。
![](https://cxg-design.jp/wp-content/uploads/2024/02/ec11703553868e34498fd41c895047c0.png)
MaxButtons>Buttonsのショートコードをコピー
![](https://cxg-design.jp/wp-content/uploads/2024/02/999a4a663df41a1637bc41868309e995.png)
設置したい場所にペースト
以上でMaxButtonsの説明は終了です。細かな設定はできませんが、ホバーアクションがコードを使わず、簡単に実装できる点がいいですね。