ボタンのアニメーション一覧 | アニモーション

Hold Progress Button

長押しでプログレスバーが進み、完了すると確定するボタン。

Gradient Border Button

@propertyで回転角をアニメーションするconic-gradientボーダーボタン。

Anime Elastic Button

anime.jsの弾性イージングで押すとぐにゃっと変形するボタン。

Plasma Field Button

Canvas上にプラズマフィールドが脈動するサイバーパンク風ボタン。

Three.js Hologram Button

Three.jsで浮遊するホログラム風パーティクルが背景に舞うボタン。

GSAP Magnetic Pull Button

マウスに吸い寄せられるようにGSAPで滑らかに追従するマグネティックボタン。

Wave Distortion Button

SVGフィルターで波状の歪みエフェクトがかかるボタン。ホバーで波が大きくなる。

Gravity Drop Button

押すとボタンが重力で落下し、バウンスして戻る物理演算ボタン。

Typewriter Command Button

ボタンテキストがタイプライター風に順番に切り替わるCTA。anime.jsで文字送り。

ネオンの脈動グローが呼吸のように光るCTAボタン。@propertyでグロー半径をアニメーション。

Morphing Blob Button

SVGのblob形状が常にモーフィングし続ける有機的なボタン。

Particle Burst Button

クリックでパーティクルが爆発的に飛び散るCanvas製ボタン。視覚的インパクトが非常に高い。

Ghost Button Pulse

待機時にパルスで注目を集めるゴーストボタン。

Pill Toggle Button

クリックでON/OFFが切り替わるピルトグル。

Soft Shadow Button

押すとシャドウが消えて沈み込むボタン。触覚的。

ミニマルなアンダーラインCTAリンク。記事内に。

Stretch Hover Button

ホバーで横に伸びるストレッチボタン。

Icon Morph Button

クリックでプラスがチェックマークに変化するボタン。

Double Layer Button

二重レイヤーがずれてホバーで揃うボタン。

Arrow Slide Button

ホバーで矢印が右からスライドインするCTAボタン。

Neon Glow Button

ネオンサインのように光るボタン。暗い背景のLPに。

Liquid Fill Button

ホバーで液体が底から満たされるようなボタン。

Split Reveal Button

ホバーで上下にスプリットしてテキストが切り替わるボタン。

Elastic Press Button

押すとゴムのように弾むエラスティックボタン。

Outline Fill Button

ホバーでアウトラインから塗りに変化するボタン。

Gradient Shift Button

グラデーションが滑らかに移動するプレミアムボタン。

Ripple Click Button

クリック位置から波紋が広がるマテリアル風ボタン。

Border Flow Button

ボーダーが流れるように光るボタン。SaaS LPに。

光の反射が流れるシマーエフェクト。プレミアム感を演出。

Magnetic Button

カーソルに引き寄せられるマグネティックボタン。CTAに最適。

Proバッジ付きのアニメーションはProプランでコードをコピーできます。