SWELLボタン（ふわっと動くボタンを作る）

2026年3月26日2026年5月8日

ふわっと動くボタンを作る

ボタンに動きを付けると、さらに注目を集めることができます。

ここでは、上下にゆっくり動く「ふわふわアニメーション」を設定します。

STEP

SWELLボタンブロックに「クラス」を追加

まず、SWELLボタンのサイドバーの「高度な設定」を開き、「追加CSSクラス」に好きな名前（クラスといいます）を入力します。

今回は、btn-updownと入力します。

下の画像では、すでに「is-style-btn_normal」と記載されているので、半角スペースを入力したうえで「btn-updown」を入力しています。

以下で、追加CSSクラスの部分を拡大しました。

クラスを追加したら保存することを忘れないようにしましょう！

STEP

　「追加CSS」にCSSを追加

WordPressのダッシュボードに戻り「外観」⇒「カスタマイズ」をクリックします。

すると、左側に「カスタマイズ中　追加CSS」欄が表示されます。

「カスタマイズ中　追加CSS」欄へ以下のCSSをコピペして、「公開」をクリックしてください。

/* ふわふわ動くボタン*/
.btn-updown {
animation-name:btn-updown; /* 動きの名前 */
animation-delay:0s; /* 動きの開始時間 */
animation-duration: 2.5s; /* 動きの動作時間 */
animation-timing-function: ease-in-out; /* 動き（徐々に早く）*/
animation-iteration-count: infinite; 
}
@keyframes btn-updown {
  0% { transform: translateY(0); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0); }/* 上下の動き */
}