LPを作っていると、
「なんかボタンが目立たない…」
って思うことありませんか？👀
今回、パーソナルジムのLPを作りながら、
- CTAボタンをもっと押したく見せたい
- でも派手すぎるのは嫌
- Elementor無料版でやりたい
と思って試したところ、
“ふわっと大きくなるアニメーション” が簡単にできました✨
しかもCSSをコピペするだけ。
今日はそのやり方をまとめます☺️
⸻
やりたかったこと
こんな感じ👇
- ボタンがゆっくり大きくなる
- また元に戻る
- ずっと繰り返す
LPでよく見る、
「つい押したくなるCTA」みたいな動きです。
⸻
最初に困ったこと
Elementorの「開始アニメーション」で
Pulseを選んだんですが…
1回しか動かない😂
しかも、
常にふわふわ動かしたかったので違いました。
⸻
解決方法
無料版Elementorでも、
- CSSクラス
- HTMLウィジェット
を使えばできました✨
⸻
やり方
① ボタンを選択
まず、動かしたいボタンをクリック。
⸻
② 「高度な設定」→ CSSクラス
ここに↓
pulse-btn
と入力。
③ HTMLウィジェットを追加
ページのどこか下に
HTMLウィジェットを追加します。
⸻
④ このコードをコピペ
<style>
.pulse-btn{
animation:pulse 2s infinite;
}
@keyframes pulse{
0%{transform:scale(1);}
50%{transform:scale(1.05);}
100%{transform:scale(1);}
}
</style>
これだけ！
⸻
実際やってみた感想
思った以上にLPっぽくなりました✨
しかも、
* ボタン画像を変えても動く
* 色を変えても動く
* テキストを変えても動く
のでかなり便利。
私は今回、
「体質改善カウンセリング予約ボタン」
に使いました☺️
⸻
やりすぎ注意かも
最初、
大きく動かしすぎたら広告感が強くなりました😂
なので、
scale(1.05)
くらいの控えめがおすすめです。
女性向けLPにも合いやすい◎
まとめ
Elementor無料版でも、
✅ CTAボタンを動かせる
✅ LPっぽく見せられる
✅ CSSコピペだけでOK