「おしゃれなボタンを作りたい」という欲求は多くのWebデザイナーが持っているのに、実装の選択肢はホバーで色が変わる・影が出る・スケールするの三択に収まりがちです。もっと視覚的に「特別な感じ」をCTAに持たせたいなら、パーティクル・スパークル系のエフェクトが有効です。ホバーした瞬間に星や光の粒が飛び散る、色とりどりの紙吹雪が弾ける、輝く点滅がボタン表面を流れる——こういった「ボタンが生きているような動き」は、AIツール系・クリエイティブ系・エンタメ系サイトのCTAで2024〜2026年に急増しています。
この記事では、パーティクル・スパークル系のCSSボタンを5パターン紹介します。多粒子の飛散・リング状の出現・紙吹雪・輝く粒・彗星の軌跡と、スパークルの「種類」ごとにデモを揃えました。すべてJavaScript不要のCSSのみ実装。box-shadow の多重指定と @keyframes の組み合わせで実現しており、WordPressやSWELLにもコピペで使えます。
Star Burst（スター・バースト）
ホバーした瞬間、8色の光の粒がボタン中心から四方八方に弾け飛びます。::before をボタン中央に置いた透明な4pxの点として配置し、box-shadow の多重指定で8つの色付き粒子を同一座標に重ねて作ります。アニメーション開始時にすべての粒が中心に集まった状態から、終了時にそれぞれが異なる座標まで飛び散る設計です。opacity: 0 → 1 → 0 のフェードで出現と消滅を滑らかにしています。
ダーク系の背景（#0d1117）に白・金・ピンク・シアンの粒が飛び散る組み合わせが最も視覚的インパクトが大きく、「送信」「生成」「スタート」など「何かが始まる」アクションのCTAに使いやすいです。粒はボタン外にはみ出すため overflow: visible を設定しており、余白を確保したレイアウトに向いています。個人的にこのデモのボックスシャドウを書くとき、8方向へのベクトルを設計しながら「物理の爆発計算みたい」と感じました。
See the Pen Star Burst by BaseKENT (@basekent) on CodePen.
調整方法
- 粒子の色:
box-shadow内の8色（#ffd700,#ff6b9dなど）を任意の色に変えられます。ブランドカラー系に統一すると落ち着いた印象に、白・金・ピンクのままだとより「魔法感」が増します - 飛散距離: 100%フレームの各値（
-54px -44pxなど）を大きくするほど大きく広がります。80px以上にするとかなり激しい爆発感になります - アニメーション速度:
0.7sを0.5sにすると一瞬のフラッシュに、1.0sにするとゆっくりとした拡散になります
Sparkle Ring（スパークル・リング）
ボタン中心から均等間隔で8つの色付きドットが放射状に広がり、輝くリングを描いてから消えます。Sparkle Ringが Star Burst と違う点は、粒子が「最初からリング状の距離に配置されて拡張する」動き方です。0%フレームでは粒が中心の近く（半径8px程度）に集まり、35%フレームで46px半径のリングを形成してピークの明るさになり、100%フレームで60px半径まで広がりながらフェードする設計です。
紫系グラデーションのピル型ボタンとの組み合わせが視覚的に完成度が高く、「プレミアムさ」「魔法的な特別感」を演出したいサービスのCTAに向いています。ホバーするたびに光の輪が出現する体験は、ユーザーが「もう一度触りたくなる」繰り返しのインタラクティブ性があります。クリエイティブ系LP・AIサービス・音楽プラットフォームのメインCTAで使ったとき、ページの格が一段上がります。
See the Pen Sparkle Ring by BaseKENT (@basekent) on CodePen.
調整方法
- リングの半径: 35%フレームの各値（
-46px,33pxなど）を大きくするとリングが広く、小さくするとコンパクトになります。ボタンサイズに合わせて調整してください - 粒子のサイズ:
box-shadowの第3引数（spread,3pxまたは2px）を大きくすると粒が太くなります。4〜5pxにするとより存在感のあるリングになります - ピル形状の変更:
border-radius: 50pxを8pxにすると角丸スクエアになります。どちらのボタン形状でも同じリングアニメーションが動きます
Confetti Pop（コンフェッティ・ポップ）
ホバーで赤・オレンジ・緑・青・黄・ピンク・紫の10色の紙吹雪がボタンから弾けます。::before（正方形、border-radius: 0）と ::after（円形）の2種類の形を使い分けることで、「クラッカーを鳴らした直後」のランダム感を出しています。飛散する方向もすべてバラバラで、開始位置が同じでも終点が異なるため「散乱」のリアリティが生まれます。
明るい白背景との組み合わせで紙吹雪の色彩が最もよく映えます。「申し込み完了」「おめでとう」「キャンペーン開始」といった祝祭感のあるコンテキストのCTAに使ったとき、テキストと動きが相乗効果を発揮します。他のスパークルデモに比べて「子供っぽい」という先入観があるかもしれませんが、配色を落ち着いたブランドカラーに絞れば大人向けのECサイトやサービスにも合わせられます。
See the Pen Confetti Pop by BaseKENT (@basekent) on CodePen.
調整方法
- 紙吹雪の色:
confetti-sq/confetti-ciアニメーション内の各色を変更します。2〜3色に絞るとスタイリッシュに、7〜8色にするとより祭り感が出ます - 形状の比率:
::beforeのborder-radius: 0（四角）を4pxにすると角丸の正方形に、50%にすると::afterと同じ円形になります - 飛散方向: 100%フレームの各オフセット値（例:
-58px -42px）の符号を変えることで飛ぶ方向を変えられます。すべてを上方向（y値を負）にすると花火の噴出のような演出になります
Glitter Shimmer（グリッター・シマー）
ホバーすると、ボタン表面全体にキラキラした光の粒が流れます。background: radial-gradient(circle, white 1px, transparent 1px) / 18px 18px でドットグリッドパターンを作り、@keyframes で background-position を 0 0 から 18px 18px まで動かすことで粒が斜めにゆっくり流れます。opacity を最大 0.55 に抑えているため、ボタン本体のグラデーションが透けて見え、「ホログラムにかかった光」のようなテクスチャ感が生まれます。
エメラルドグリーン系のグラデーションとの組み合わせが特に映えます。無限ループ（infinite）で回し続けるため、ホバーしている間ずっときらめき続ける演出です。美容系・ジュエリー系・グリーン系ブランドのCTAに向いており、「ホバーを外したくない」と思わせる粘着力があります。バックグラウンドの光の粒子感という発想は、SVG feTurbulence を使うStatic Noiseとは全く異なるアプローチで、こちらは完全に数学的・規則的な美しさです。
See the Pen Glitter Shimmer by BaseKENT (@basekent) on CodePen.
調整方法
- 粒の密度:
background-size: 18px 18pxの値を小さく（例:12px）すると粒が密に、大きく（例:25px）すると粒が粗くなります - 粒の明るさ:
rgba(255,255,255,0.85)の不透明度を調整します。1.0にすると純白の点に、0.5以下にすると控えめなきらめきになります。ホバー時の最大透明度0.55も合わせて調整してください - 流れの速度:
animation: shimmer-scroll 1s ease-in-out infiniteの1sを短くするとより速く流れます。0.6sで「速めの輝き」、2sで「ゆっくりした粒の流れ」になります
Comet Trail（コメット・トレイル）
ホバーすると、ボタンを横断する彗星の軌跡が一閃します。::before を skewX(-18deg) で斜めに歪めた矩形として設定し、内部の linear-gradient で「先端が輝き、前後が薄れる」尾を引いた光の形を作ります。translateX(-160%) から translateX(320%) まで一気に横切るアニメーションで、「流れ星が通過した」印象を与えます。
アウトラインのみのゴーストボタン（黒背景・白ボーダー）の上を白い彗星が走る組み合わせが、コントラストが最もよく出ます。他の4本が「ボタンから何かが飛び出す」演出なのに対して、このデモは「ボタンの上を何かが横切る」構造で、動きの方向性が一方向に統一されているため「速度感」「推進力」のある印象になります。「Send」「Launch」「Go」といった「前へ進む」コンテキストのCTAに最適。また overflow: hidden で完全にボタン内に封じ込めているため、周囲のレイアウトへの影響がゼロです。
See the Pen Comet Trail by BaseKENT (@basekent) on CodePen.
調整方法
- 彗星の太さ:
::beforeのwidth: 38%を大きくすると太い彗星に、20%前後にすると細い光の筋になります - 傾きの角度:
skewX(-18deg)の値を変えます。-10degにするとほぼ垂直な筋に、-25degにするとより斜めの軌跡になります。正の値にすると傾く方向が逆になります - 飛行速度:
0.75sを短くするほど素早い一閃になります。0.4sだとほぼ瞬間的な光に、1.2sにするとゆっくりした彗星の通過になります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
