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

  • Plugin

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

     出典 : MaxButtons

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

    HOVER ACTION BUTTON

    BUTTON

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

    項目設定値
    Aout button size on screen100%

    グラデーションボタン

    では、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 Width240px
    Button Height空欄

    Border

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

    項目設定値
    Radius10
    Width0px
    Shadow Blur0

    Background

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

    項目設定値
    Use Gradientsチェック有
    Bacground colorStart #1e73be / End #1b3faa
    Bacground hoverStart #1a7fb2 / End #1767b7
    Gradient Stop45

    Text Shadow

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

    項目設定値
    Shadow Offset Left-2
    Shadow Offset Top1
    Shadow Blur1
    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」は、デフォルトのまま、チェックを外しておきます。

    「Button Width」を100%に設定

    「Background color」の透過度を0、「Background hover」を黒に設定。

    「Container」は、デフォルトのまま、チェック無。

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

    透過ボタン

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

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

    Border＞Radiusを50に設定

    「Background hover」の透過度を0.7に設定

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

    設置

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

    MaxButtons＞Buttonsのショートコードをコピー

    設置したい場所にペースト

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

    You may also like