マウスオーバー・ボタンを作成する Elementorのボタン・ウジェットより、以下のようなマウスオーバー・ボタンを作成する手順を公開します。下記のボタンの上にマウスを持っていって下さい。左側のボタンがElementorの初期リンクボタンです。その面白味のないボタンを右側のマウスオーバー・ボタンに変形してみました。 ここをクリック 事業案内Business information その作成手順です。 ここをクリック 1.ボタンの初期設定 Elementorのウジェット領域からボタンのウジェットをセクション領域に挿入した直後のボタンイメージです。 事業案内Business information 2.特大サイズに変更 先ずテキスト文書を変更します。(左記)次にボタンのサイズを特大に設定します。 事業案内Business information 3.丸いボタンに変更 枠線の太さを1pxにして、枠線の丸みを60に設定することで、左図のような丸みを持ったボタンになります。 事業案内Business information 4.マウスオーバーに設定 マウスオーバーの設定で、文字色:白、背景色:赤、枠線の色:赤で設定すると、マウスをボタンの上に持っていくと赤いボタンに変化します。 ナビメニューのメニューボタンに応用 事業案内Business information 会社概要Company Profile サービス案内Service guide お問い合わせContact Us ボタン形状を長方形にし、ボタンサイズを微小にし、ナビゲーションメニューとして横並びにしてみました。ボタンを横並びにするには、「高度な設定」で「配置の幅」を「インライン(auto)」に設定すれば横並びになります。通常のナビゲーションメニューとは別の新たなメニューを設定できるかも!