ダーク系のWebサイトや、ゲーム・音楽・クリエイター向けのポートフォリオを制作しているとき、「このボタン、もっと存在感を出したい」と感じることがあります。白い背景に映えるボタンはいくらでも選択肢があるのに、暗い背景になった途端にデザインの引き出しが減る気がしませんか。
このページで紹介するのは、box-shadow・text-shadow・filter・@keyframesだけで実装した、JavaScriptなしの純CSSネオンボタン5選です。WordPress/SWELLのカスタムHTMLブロックにそのままコピペして使えます。5つの選び方は、こんなイメージで使い分けてください。常時アニメーションOKで視線を集めたいなら「Neon Pulse」か「Color Shift Glow」、ホバーのみで動くシンプルさなら「Electric Border」か「Cyber Text」、ダークな世界観を演出したいなら「Dark Flicker」が向いています。
Neon Pulse（ネオン明滅）
呼吸するように、発光がゆっくりと明滅するボタンです。
@keyframesでbox-shadowの強度をfromとtoで交互に変化させています。ネオン管が「ふわっ、ふわっ」と息をするように光が膨らんでは収まる。静止した画面の中でも「動いている」ように見えるため、視線をボタンに釘付けにする効果があります。animation-direction: alternateを指定しているため、ループ時に逆再生→正再生と滑らかに繰り返します。ヒーローセクションのCTAや、ランディングページのメインボタンとして使うと特に効果的です。シアン（#00f0ff）はダーク背景との相性がとても良く、ポートフォリオやクリエイター向けサイトの第一印象をぐっと上げてくれます。なお、アニメーションが常時動くデザインのため、@media (prefers-reduced-motion: reduce)でanimation: noneを指定するとアクセシビリティ対応になります。
See the Pen Neon Pulse by BaseKENT (@basekent) on CodePen.
調整方法
#00f0ffが発光色です。#ff00aa（ホットピンク）や#a855f7（パープル）に変えるだけでカラーがガラッと変わります1.5sが明滅の速さです。2.5sにするとゆったり穏やか、0.8sにすると激しく主張するボタンになりますpadding: 14px 40pxでボタンサイズを調整できます。横幅を広げたいときは14px 60pxが目安です
Electric Border（電光ボーダー）
ホバーした瞬間、ボーダーが電気を帯びたように内側からも外側からも輝くボタンです。
box-shadowのアウトサイドとinset（内側）を同時に指定することで、ボーダーの外と内の両方を発光させています。通常状態ではじんわりとした控えめな光、ホバーで一気に存在感が増す設計です。「気づかせる」ためではなく「反応させる」ための動きとも言えます。マウスが乗った瞬間の反応が気持ちよく、クリックを自然に誘います。ピンク系のネオンカラー（#ff00aa）は、音楽系サイト・ナイトクラブ・バー・アーバンなブランドとの相性が特に良いです。ホバー時のみアニメーションが動くため、アクセシビリティへの配慮が最小限で済むのも実務上の利点です。ライトモードのサイトで使いたい場合は、背景色を#fffに変えてカラーを暗めに調整すると馴染みます。
See the Pen Electric Border by BaseKENT (@basekent) on CodePen.
調整方法
#ff00aaを#60a5fa（ブルー）や#a855f7（パープル）に変えると、雰囲気ごと別のデザインになりますtransition: 0.3sがホバー時の反応速度です。0.1sにするとキレッキレな反応、0.6sにするとゆっくり変化しますborder-radius: 2pxを0にすると直角のサイバー風、50pxにするとフル丸角のピルボタンになります
Cyber Text（サイバー文字発光）
ホバーすると、文字のレタースペーシングが広がりながら光るボタンです。
text-shadowで文字を発光させつつ、ホバー時にletter-spacingをトランジションで広げる組み合わせです。「Button」という5文字が「B u t t o n」とゆっくり展開していく動きは、単純ですが一度見たら印象に残ります。ボーダーはあえて細く1pxにとどめ、装飾の主役を「文字の光」に絞っています。テック系・ハッカー・プログラミング関連のサイトでよく見られる表現で、モノスペースフォント（monospace）を指定することでターミナルらしい等幅の文字が表示されます。5つのなかでもっとも「文字だけで勝負する」構造なので、ダーク系だけでなくグレー背景のサイトでも発光色を暗めにすれば応用できます。
See the Pen Cyber Text by BaseKENT (@basekent) on CodePen.
調整方法
#39ff14はいわゆる「マトリックスグリーン」です。#00f0ff（シアン）に変えるとよりクリーンな印象になります- ホバー時の
letter-spacing: 8pxが文字の広がり量です。12pxにすると広がりが大きく派手、5pxにすると控えめな動きになります font-family: monospaceをsystem-uiに変えると等幅でなくなり、やや柔らかい印象になります
Color Shift Glow（カラーシフト発光）
クリックしなくても、ボタン自体が色を変えながら発光し続けるボタンです。
@keyframesの中でボタンのcolor・box-shadow・outline-colorを同時にアニメーションさせ、ピンク→シアン→オレンジと3色を循環させています。ユーザーが何もしなくても動き続けるため、静止した画面でも確実に視線を集めます。特にダーク背景が深いほど発光の美しさが際立ちます。イベントページのカウントダウン付きCTA、ゲームサイトのスタートボタン、ライブ配信のチャンネル登録ボタンなど、「見せること」「目立たせること」が最優先の場面に向いています。outlineプロパティでボーダーを表現しているため、border-radiusを追加するだけで角丸にできるのも扱いやすいポイントです。常時アニメーションが動くため、Neon Pulseと同様にprefers-reduced-motion対応を入れておくと安心です。
See the Pen Color Shift Glow by BaseKENT (@basekent) on CodePen.
調整方法
@keyframes内の3色（#ff0080,#00f0ff,#ffaa00）を変えることでカラーサイクルを変えられます。ブランドカラーを使うと世界観が統一されます3sが一周の速さです。5sにするとゆったり変化、1.5sにすると目まぐるしく変化しますborder-radius: 8pxを追加するとコーナーに丸みをつけられます。角丸の大きさはお好みで調整してください
Dark Flicker（ダークフリッカー）
壊れかけたネオン管のように、不規則にちらつくボタンです。
@keyframesのタイミング関数にstep-endを使うことで、値が滑らかにではなくカクカクとジャンプするように変化させています。filter: drop-shadowとopacityを組み合わせて、電気系統が不安定なネオン管のようなちらつきを再現しています。「Neon Pulse」のなめらかな呼吸とは正反対の、意図的に「ガタついた」動きです。ホラーゲーム・廃墟テイスト・ディストピア世界観・ダークファンタジーのサイトに自然に溶け込みます。オレンジ系（#ff6b35）は「錆びたサイン」「古いバー」のようなノスタルジックさも感じさせる色で、レトロフューチャーな雰囲気にもマッチします。step-endは通常のアニメーションと違い、フレーム間を補完しないため、CPUへの負荷が軽いというメリットもあります。
See the Pen Dark Flicker by BaseKENT (@basekent) on CodePen.
調整方法
@keyframes内のopacityの値や間隔を変えることでちらつきのパターンが変わります。opacity: 0を追加すると完全に消える瞬間を作れます#ff6b35（オレンジ）を#ff0000（赤）にすると危険な雰囲気が強まり、#00f0ffにするとよりクールな印象になりますanimation: dark-flicker 2sの2sを4sにするとちらつきのサイクルが遅くなり、偶発的な感じが増します
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
