Elementor ボタンにホバーエフェクト

今回はボタンウィジェットを紹介します。?

ウィジェットの中でよく使うボタン。こちらも設定を色々弄るといろんなデザインのボタンを作成できます。

ではいってみましょー?

はじめに

ボタンウィジェットを「新しいセクションに追加」へドラッグ&ドロップ。

左のコンテンツエリアより設定をします。

タイプより5種類のカラーを選べます。

cssでカスタマイズも可能ですがElementorの設定だけで大きさやロールオーバー処理や角丸など出来ますっ?

HOVERとホバー時のアニメーション

左のスタイルエリアよりHOVERの背景色を変更してホバー時のアニメーションを作りました。

このページ下のDEMOよりアニメーションをご確認ください。

アニメーション27種類(2018/2/3)あります。。。多すぎ。?

ボタンのバリエーション

ボタンにアイコンを付けたり、大きさなどを作ってみました。

その1

左のコンテンツエリアよりアイコンを設定

その2

スタイルエリアよりボーダー丸み左右上下50pxを設定

その3

左のコンテンツエリア サイズを大、スタイルエリアのボーダータイプ1本線の黒に設定

 

その4

左のコンテンツエリア サイズを特大、スタイルエリアよりボーダー丸み0を設定

その5

左のスタイルエリア、ボックスシャドウを設定

アイコンの種類についてはこちらからご覧ください。

WordPressのメニューへWebアイコンフォントFont Awesomeを表示

DEMO

Elementorカテゴリ

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.