Atomicエレメントの「ボタン」のホバーの設定について解説いたします。
CSSでホバーを設定する場合は、 ::hover を付けてCSSでデザインを指定しますが、ElementorV4では数回のクリックだけで設定が可能です。
ボタンの設定は、主に（1）フォントの色、（2）背景の色、（3）枠線の色、（4）ボックスシャドウなどでデザインするのが一般的だと思います。
適宜設定しましたら、次にホバーの設定をします。
ホバーの設定はクラスからホバーを選択します。
その状態でホバー時のデザインを先ほど同様の設定箇所を変更していきます。
設定が完了しましたら、効果を試してみてください。
ここで気がつくのは、動きがカクカクしていることです。
このままでも問題はないのですが、少しスムーズに色や形を変更したいと思ったときの設定方法を続けて解説していきます。
ホバー時のスムーズな変化の設定方法
CSSでは「transition: all 0.4s ease;」と書きますが、その設定とほぼ同じ設定ができます。
まず（1）クラスを元のノーマルにもどします。
次に（2）効果のメニューの（3）遷移にメニューを開き、（4）＋ボタンで設定します。
ここではすべてのプロパティを選択していますが、文字のサイズだけ遅れて変化させたいなど特殊な設定も可能です。
MSはミリセカンドで1000MSが1秒のことです。
400MSは0.4秒ということになります。
- 200ms：キビキビした動き
- 300ms：自然で軽快
- 400ms：滑らかで少しゆったり
- 500ms以上：やや遅く感じる場合あり
それぞれの動きのイメージはこんな感じです。
以上の解説を参考に設定を試してみてください。
