Diviの新しい背景オプションを備えたスタイリングボタン（6つのデザインが含まれています）

Diviの新しいバックグラウンドオプションインターフェイスを利用していない場合は、見逃していることになります。 背景デザインの可能性は驚くべきものです。 しかし、ボタンに同じ強力なデザインオプションがあるのは素晴らしいことではないでしょうか。 答えが「はい」の場合、あなたはこの投稿を気に入ると思います。

今日は、同じ強力な背景デザイン機能をスタイルボタンに導入する方法を紹介します。 このデザイントリックは、ボタンモジュールの後ろに行と列の背景を重ねて、3層のデザイン機能を提供します。 このような力で、物事は危険になる可能性があります。 落ち着いて最初はゆっくり行くのがベスト

さあ行こう。

スニークピーク

この投稿で取り上げたボタンのデザインの例を次に示します。

Diviの新しい背景オプションを備えたスタイリングボタン（6つのデザインが含まれています）

私たちのYoutubeチャンネルを購読する

セットアップ

Visual Buildingを使用して、1列の行を持つ通常のセクションを追加します。

次に、ボタンモジュールを行に追加します。

次に、ボタンモジュールの設定を次のように更新します。

コンテンツオプション

ボタンテキスト：[テキストを入力]
ボタンのURL：[URLを入力]

デザインオプション

ボタンの配置：中央
テキストの色：明るい
ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：48px

高度なオプション

列の幅を埋めるには、100％の幅が必要になります。 これを行うには、[メイン要素]ボックスに次のカスタムCSSを入力します。

Width: 100%;

設定を保存する

ボタンの境界線とテキストが白であるため、現在ページに何も表示されていません。 ボタンモジュールの設定を使用してボタンの背景色をスタイル設定する代わりに、より高度な背景オプションを使用して、ボタンの後ろの行/列の背景色をカスタマイズします。 ボタンのより具体的なデザインを開始したら、ボタンモジュールの設定を再検討します。 しかし、とりあえず、行の設定を終了しましょう。

新しいボタンが配置されている行設定に移動し、以下を更新します。

コンテンツオプション

[列1の背景グラデーション]タブを選択し、白いプラス記号が付いた灰色の円形ボタンをクリックします。

これで、デフォルトのグラデーションカラーが白いボタンの後ろに表示されるはずです。

柱はボタンの後ろにぴったりと収まっていますが、ボタンの幅を狭くする必要があります。 これを行うには、行のサイズ設定を使用します。 行にカスタム幅を設定することで、ボタンの幅も設定します。

デザインオプション

デザインオプションの下で、次のように調整して、新しいボタンに合うように行のサイズを調整します。

カスタム幅を使用：はい
カスタム幅：500px（これによりボタンの最大幅が500pxに設定されます）
カスタムパディング：0px上、0px右、0px下、0px左

高度なオプション

行と列の境界半径をボタンに設定したものと一致させて、すべてが一致するようにする必要があります。これを行うには、[メイン要素]ボックスに次のカスタムCSSを入力します。

border-radius: 10px;

同じCSSを[列のメイン要素]ボックスに入力します。

border-radius: 10px;

設定を保存する

行の設定が更新され、カスタムの幅とパディングが追加されたので、2つのことが達成されました。 まず、ボタンのカスタム幅を正常に設定しました。 次に、ボタンのスタイル設定に使用できる背景オプションの別のレイヤーがあります。

これは、後でスタイリングに使用できる合計3つの背景レイヤー（ボタン、列、行）です。

これは、ボタンが現在どのように構築されているかを示しています。

かなりかっこいいですよね？

基本的な設定は以上です。 今度は、ボタンの素晴らしいデザインを作成する楽しい部分です。

素晴らしいボタンデザインの作成

＃1ビデオ背景ボタン

このボタンを作成するには、3つのレイヤーすべて、ビデオの行の背景、グラデーションの列の背景、およびわずかに青いオーバーレイのボタンの背景を使用します。

行設定について、次のコンテンツオプションを更新します。

背景ビデオ：[アップロードビデオ]
列1の背景グラデーションの色：rgba（12,113,195,0.41）、rgba（131,0,233,0.18）

設定を保存する

ボタンモジュール設定については、以下を更新してください。

コンテンツオプション

ボタンテキスト：「チェックしてください」

デザインオプション

ボタンの背景色：rgba（12,113,195,0.25）
ボタンの境界線の色：＃0c71c3

設定を保存する

今私たちが残した唯一の問題は、ビデオの背景の境界半径です。 ボタンに一致する境界線の半径をビデオに与えるために、カスタムCSSを追加する必要があります。 この追加コードは、ビデオの背景ボタンにのみ必要です。

カスタムCSSを追加するには、Visual Builderからページ設定に移動し、[詳細設定]タブをクリックします。 次に、カスタムCSS入力ボックスを次のCSSで更新します。

.et_pb_section_video_bg {

border-radius: 10px;

}

設定を保存する

ヒント：もう1つの優れたデザインオプションは、ホバーでビデオを表示することです。 ボタンモジュールに無地の背景色を付け、ホバー時に透明に変更するだけです。

それでおしまい！ これで、ビデオの背景を持つボタンができました。

＃2チェッカーボタン

チェッカーボタンでは、背景色のグラデーションの2つのレイヤー（行と列）を使用する必要があります。

このボタンを作成するには、グラデーションの最初のレベルの行の背景とグラデーションの色の最後のレイヤーの列の背景の2つのレイヤーを使用します。

行設定について、次のコンテンツオプションを更新します。

背景のグラデーションの色：＃8300e9、＃0c71c3
勾配方向：270度
開始位置：50％
終了位置：0％
列1の背景グラデーションの色：rgba（224,11,0,0.39）、rgba（255,255,255,0）
グラデーション方向：180度
開始位置：50％
終了位置：0％

設定を保存する

次に、ボタンモジュール設定に移動し、以下を更新します

コンテンツオプション

ボタンテキスト：「購読」

デザインオプション

ボタンの境界線の幅：0px
ボタンの文字間隔：10px
ボタンフォント：デフォルト、太字（B）、斜体（I）
ボタンホバーの文字間隔：10px

それでおしまい。 これが最終結果です。

これで、ボタンにチェッカー効果を追加する方法がわかりました。

＃3放射状グラデーションボタン

このボタンを作成するには、2層（行と列）の背景色のグラデーションを使用します。

行設定について、次のコンテンツオプションを更新します。

背景のグラデーションの色：＃8300e9、＃0c71c3
グラデーションタイプ：ラジアル
半径方向：中心
開始位置：50％
終了位置：100％
列1の背景グラデーションの色：rgba（224,11,0,0.39）、rgba（255,255,255,0）
グラデーションタイプ：ラジアル
半径方向：中心
開始位置：50％
終了位置：100％

設定を保存する

次に、ボタンモジュール設定に移動し、以下を更新します。

コンテンツオプション

ボタンテキスト：「お問い合わせ」

デザインオプション

ボタンの境界線の幅：0px
ボタンフォント：Crafty Girls

ボタンアイコン：[ハートのアイコンを選択]
ボタンのホバー時にアイコンのみを表示：いいえ

高度なオプション

最後に、ボタンにスライドシャドウを追加しましょう。 前のコードに加えて、[メイン要素]ボックスに次のカスタムCSSを入力します。

box-shadow: 0px 5px 10px 3px #ccc;

それでおしまい！ 最終結果は次のとおりです。

＃4ブルズアイボタン

このボタンを作成するには、2層（行と列）の背景色のグラデーションを使用します。 さらに、ボタンモジュールにカスタムCSSを追加して、下の境界線のポップアップ効果を作成します。

行設定について、次のコンテンツオプションを更新します。

背景のグラデーションの色：＃023500、＃008c02
グラデーションタイプ：ラジアル
半径方向：中心
開始位置：19％
終了位置：0％
列1の背景グラデーションの色：rgba（0,206,72,0.43）、rgba（255,255,255,0）
グラデーションタイプ：ラジアル
半径方向：中心
開始位置：32％
終了位置：0％

次に、ボタンモジュール設定に移動し、以下を更新します。

コンテンツオプション

ボタンテキスト：「購入」

デザインオプション

ボタンのテキストサイズ：65px
ボタンの境界線の幅：0px
ボタンフォント：Roboto、太字（B）、大文字（TT）

高度なオプション

最後の仕上げです。 メイン要素入力ボックスの既存のコードに次のカスタムCSSを追加します。

box-shadow: 0px 5px 0px 0px #01771f;

＃5画像ボタン

このボタンを作成するには、3つのレイヤーすべて、背景画像の行、グラデーションの背景の列、および半透明の青色オーバーレイのボタンの背景を使用します。

行設定について、次のコンテンツオプションを更新します。

[背景画像]タブの下

背景画像：[画像をアップロード]
背景画像サイズ：カバー
背景画像の位置：中央
背景画像の繰り返し：繰り返しなし
背景画像のブレンド：乗算

[背景グラデーション]タブの下

背景のグラデーションの色：rgba（12,113,195,0.33）、＃edf000
グラデーションタイプ：線形
グラデーション方向：63度
開始位置：50％
終了位置：100％

次に、[列1の背景]オプションまで下にスクロールして、[グラデーション]タブを選択します。

列1の背景グラデーションの色：rgba（236,239,31,0.66）、rgba（0,0,0,0.49）
カラムグラジエントタイプ：線形
カラムグラジエント方向：139度
カラム開始位置：12％
列の終了位置：0％

設定を保存する

これで、2番目のレベルの背景デザインが処理されます。 もう1つ残っています。

ボタンモジュール設定に移動し、以下を更新します。

コンテンツオプション

ボタンテキスト：「チケットを入手」

デザインオプション

ボタンの背景色：rgba（12,113,195,0.16）
ボタンの境界線の色：＃efef4f
ボタンフォント：ラト
ボタンアイコン：[チケットアイコンを選択]
ボタンのホバー時にアイコンのみを表示：いいえ

ボタンホバーテキストの色：＃023b7c
ボタンホバー背景色：＃023b7c

それでおしまい！。 あなたの画像ボタンをチェックしてください。

＃6ポートレートボタン

この最後のボタンを作成するために、背景デザインの1つのレイヤーのみを使用します。 背景画像と背景色の画像ブレンドを使用して、独特の外観を作成します。

[行の設定]で、 [列1の背景オプション]まで下にスクロールして、以下を更新します。

列の背景画像：[縦向きの画像をアップロード]
列の背景画像サイズ：フィット（これにより、ポートレートが常にボタン内に収まるようになります）
列の背景画像の位置：中央左（これにより、ポートレートがボタンの左側に配置されます）
列の背景画像の繰り返し：繰り返しなし
列の背景画像のブレンド：明度（これにより、オレンジ色とポートレートがうまくブレンドされます）

現在のグラデーションカラーを設定している場合は、必ず削除してください。 そうでない場合は、オレンジ色の背景をブレンドできるようにします。 グラデーションタブをクリックし、カラーピッカーボックスにカーソルを合わせて、右上にポップアップするゴミ箱アイコンをクリックするだけです。

これで、ボタンにオレンジ色のブレンドが表示されます。

設定を保存する

次に、ボタンモジュール設定に移動し、以下を更新します。

コンテンツオプション

ボタンテキスト：「Let'sTalk」

デザインオプション

ボタンの配置：右
ボタンの境界線の色：＃ff7b23
ボタンの文字間隔：3px
ボタンフォント：ハッピーモンキー
ボタンアイコン[チャットアイコンを追加]
ボタンのホバー時にアイコンのみを表示：いいえ
ボタンホバーの文字間隔：3px

出来た！ 私はブログの連絡先ボタンのこのデザインが好きです。 私はそれが素敵な個人的なタッチを追加すると思います。

さまざまな列構造のボタンの設計

これまで、ボタンの背景として単一列の行を使用してきました。 これにより、3層の背景デザインが可能になります。 ただし、別の列構造にボタンを含めたい場合は、それが可能です。 行は背景レイヤーとして失われます。

たとえば、左側にボタンがあり、右側にテキストがある1/21/2列の行を追加するとします。 これがあなたがすることです。

新しい通常のセクションから始めて、 1/21/2列の行構造を選択します。 次に、左側の列にボタンモジュールを追加します。

ボタンモジュールの設定で、[詳細設定]タブの[メイン要素]入力ボックスに次のCSSを挿入してください。

Width: 100%;

ボタンモジュールの残りの部分は後でカスタマイズできます。

次に、 [行の設定]に移動し、 [列1の背景]オプションまで下にスクロールして、背景設定を必要に応じて更新します。

次に、[デザイン]タブに移動し、以下を更新します。

列1のカスタムパディング：0px上、0px右、0px下、0px左

設定を保存する

これで、左側の列にボタンがあり、列1の背景オプションをデザインに使用できます。 戻ってボタンのスタイルを好みに合わせて更新したら、右側の列にテキストを追加すれば完了です。

レスポンシブ？

はい。 ボタンはDiviの列構造内に構築されているため、ボタンはすべてのデバイスで適切に応答します。 特定のボタン要素がさまざまなデバイスにどのように適応するかを調整するには、ボタンモジュールの設定を再確認する必要がある場合があります。

クロスブラウザのサポート

現在、background-blend-mode CSSプロパティはInternetExplorerまたはEdgeでサポートされておらず、Safariのブレンドオプションは限られています。 ただし、ほとんどの場合、私の経験ではフォールバックは重要ではありません。

IEのボタンは次のようになります。

IEに取り組んでいる場合は、IEと他のブラウザーの両方で見栄えのする幸せなメディアを見つけるために、それらをテストすることをお勧めします。

最終的な考え

私は認めなければなりません、このチュートリアルは私にとってかなり画期的なものです。 以前は、ボタンのスタイルをクリエイティブに設定したい場合は、子テーマに多数のクラスと追加のCSSを追加する必要がありました。 しかし、Diviのバックグラウンドオプションを使用できるようになったので、私の生活はずっと楽になりました。 このデザイントリックを使用して、ボタンを次のレベルに引き上げることができれば幸いです。

コメントであなたからの連絡を楽しみにしています。

乾杯