光が外側へ向かって広がる。その一瞬の動きは、見ている人の視線を自然に引き寄せます。放射状のグラデーション、回転する光線、レーダーが走るような一周するビーム。スターバースト系のボタンは「動いている」だけでなく、「中心から何かが出てくる」というエネルギーの方向性がある分、シンプルなホバーエフェクトより視覚的な存在感が格段に強くなります。プロモーション、ゲーム系UI、ポートフォリオのCTAなど、「ここを見てほしい」というポイントに置くのが最も効果的です。
この記事では、radial-gradientで炸裂するソーラーフレア、repeating-conic-gradientで回転するピンホイール、maskプロパティで作るスパイクハロー、@propertyでアニメートするオーロラ、そしてレーダービームが一周するパターンの5本を紹介します。JavaScriptは一切なし、HTMLとCSSのみで動作します。WordPress/SWELL環境でもそのままコピペで使えます。
Solar Flare（ソーラー・フレア）
ホバーした瞬間、ボタンの中心から黄橙色の炸裂光が広がるパターンです。radial-gradientを使った::before疑似要素が、scale(0)からscale(1)に拡大することで、中心から光が「爆発する」ような動きを作ります。cubic-bezier(0.22, 1, 0.36, 1)のイージングが一気に広がってから柔らかく落ち着く動きを演出し、炎が噴出したあとに静まるような余韻が出ます。
暗い背景との対比が強いほど、フレアの存在感が際立ちます。オレンジから赤のグラデーションはゲーム系・エンタメ系・スポーツ系サイトのCTAに最もよく合います。overflow: hiddenでボタン外にはみ出ないようにしているので、周囲のレイアウトを壊しません。ファーストビューにひとつだけ置いて、フラッシュの効果音が聞こえそうな演出としても機能します。
See the Pen Solar Flare by BaseKENT (@basekent) on CodePen.
調整方法
- 光の色:
radial-gradientの色値を変えます。青系（rgba(96, 165, 250, 1)→rgba(37, 99, 235, 0.8)→ 透明）にするとエネルギービーム風になります - 炸裂速度:
transition: transform 0.55sの秒数を変えます。0.3sでパチンと弾け、0.8sでゆっくり広がります - 広がりの大きさ:
::beforeのwidthとheightを300%より大きくすると炸裂範囲がさらに広がります
Pinwheel Spin（ピンホイール・スピン）
ページを表示した瞬間から、ボタンの背景が風車のようにゆっくり回転し続けるパターンです。repeating-conic-gradient()で作った扇形の交互パターンが、animation: rotateで常時回転します。ホバーなしで動き続けるため、「見ているだけで目が引っかかる」という視覚的な磁力があります。
紫系の明暗2色で構成したスターバーストパターンが落ち着いた速度でゆっくり動く組み合わせは、クリエイティブ系・デザインスタジオ系のサイトに映えます。回転速度は意図的に遅め（6秒/周）に設定しています。早くしすぎると視認性と酔い感のバランスが崩れるので、3s以下はやや注意が必要です。ページに置いたとき、動いていることには気づくけれど邪魔に感じない、というギリギリのラインを狙っています。
See the Pen Pinwheel Spin by BaseKENT (@basekent) on CodePen.
調整方法
- 色の変更:
repeating-conic-gradientの2色を変えます。赤系（#dc2626,#7f1d1d）や青緑系（#0891b2,#164e63）に変えると雰囲気が大きく変わります - 扇の密度:
30deg 60degの角度を変えます。10deg 20degにすると扇の数が3倍になり、細かいギア歯のような模様になります - 回転速度:
animation: pinwheelRotate 6sの秒数を変えます。12sでとてもゆっくり、4sでアクティブな回転になります
Spike Halo（スパイク・ハロー）
ホバーしたとき、ボタンの周囲に放射状の光線がスターバースト状に広がるパターンです。mask-imageプロパティにrepeating-conic-gradientを指定し、10本の等間隔な光線だけを残す円形のマスクを作ります。::before疑似要素がscale(0.6) rotate(-30deg)からscale(1) rotate(0deg)に展開するとき、スターバーストが出現しながらわずかに回転して定位置に収まる動きになります。
ボタン本体にoverflow: hiddenをかけていないため、光線がボタン外側に広がって「後光が差す」演出になります。mask-imageはChrome/Edge/Firefox/Safariすべてで対応済みですが、Webkitプレフィックス（-webkit-mask-image）も合わせて指定することで安全に動作します。シャープな印象のシアン色のハローは、テック系・SaaS系ランディングページのCTAに合います。
See the Pen Spike Halo by BaseKENT (@basekent) on CodePen.
調整方法
- 光線の本数:
repeating-conic-gradientの角度を変えます。18deg 36deg（10本）を12deg 24degに変えると15本、9deg 18degに変えると20本になります - ハローの広がり:
inset: -36pxの数値を大きくするほど光線が長く広がります。-20pxなら控えめな後光、-50pxなら大きな輝きになります - 光線の色:
background: #06b6d4の色を変えると光線の色が変わります。#f59e0b（ゴールド）にすると神聖な光輪のような演出になります
Aurora Burst（オーロラ・バースト）
ホバーした瞬間、conic-gradientの開始角度が1秒かけて360度回転するパターンです。@propertyで--hue-startカスタムプロパティを<angle>型として登録することで、CSS変数のtransitionが機能するようになります。紫→青→シアン→グリーンと弧を描くグラデーションが、ホバー時にひとコマ全回転するオーロラのような動きになります。
@propertyを使ったこの手法はChrome 85+、Firefox 128+、Safari 16.4+以降に対応しており、現在の実務ではほぼ安心して使えます。transition: --hue-start 1s easeの1行だけで、通常では遷移できなかった「グラデーション角度」をスムーズに動かせるのが最大の特徴です。@propertyの宣言はCSSの先頭に置く必要があります（コンポーネントのセレクタ内に書いても動作しません）。
See the Pen Aurora Burst by BaseKENT (@basekent) on CodePen.
調整方法
- グラデーションの色:
conic-gradientの色値を変えます。ウォーム系（#dc2626,#ea580c,#ca8a04,#dc2626）にするとサンセット風のオーロラになります - 回転速度:
transition: --hue-start 1s easeの秒数を変えます。0.5sでパッと切り替わり、2sでゆっくり回転します - 初期角度:
initial-value: 200degと--hue-start: 200degの角度を変えると、ページ表示時のグラデーションの向きが変わります
Radar Ping（レーダー・ピング）
ボタンの内側でビームが一定速度で一周し続けるパターンです。conic-gradientで細い扇形（20°幅）とフェードアウト（40°幅）を組み合わせた「光線 + 余韻」の形を作り、animation: rotateで常時回転させます。overflow: hiddenでボタン内部に完全に収まった状態でビームが動くため、ディスプレイの中で稼働しているシステムのような閉じた演出になります。
グリーン×ダーク背景の組み合わせは、ターミナル・ハッカー・SFシステムのUIを想起させます。テキストを大文字に、letter-spacingを広めに設定することで「システムが何かをスキャンしている」コンテキストが強まります。ゲーム系・セキュリティ系・AI系サービスのランディングページのCTAとして機能します。conic-gradientの中心がボタンの中央にくるようinset: -100%で疑似要素を大きめに取っているので、ビームが均等に一周します。
See the Pen Radar Ping by BaseKENT (@basekent) on CodePen.
調整方法
- ビームの幅:
conic-gradientの20degを大きくするとビームが太くなります。40degにすると扇形に広がり、10degにすると鋭いレーザー線のようになります - 回転速度:
animation: radarSweep 2.5sの秒数を変えます。5sでゆったりスキャン、1.5sで高速スキャン中の演出になります - ビームの色:
rgba(74, 222, 128, ...)を変えます。rgba(56, 189, 248, ...)で青系レーダー、rgba(251, 146, 60, ...)でオレンジ系のスキャンビームになります
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
