ネオン光るパルスボタン
ネオン管のように発光し、ゆっくり脈打つボタンです。発光は文字に text-shadow 、枠に box-shadow （内外両方）を重ねて作り、 @keyframes でその影の広がりを1.6秒周期で強弱させることで「呼吸している」ような明滅を生み出します。
解説
ネオン管のように発光し、ゆっくり脈打つボタンです。発光は文字に text-shadow、枠に box-shadow（内外両方）を重ねて作り、@keyframes でその影の広がりを1.6秒周期で強弱させることで「呼吸している」ような明滅を生み出します。マゼンタ1色で統一し、ホバー時はうっすら背景を点灯させます。CSS のみで動き、JavaScript はありません。
使いどころ
- ゲームやアーケード風UIの「PLAY」「START」ボタン
- ナイトイベントや音楽系サイトの予約・参加ボタン
- 暗い背景のランディングで遊び心を出したい箇所
発光色を変えるには、枠線・影・文字色に使われている同じカラーコードをまとめて差し替えます。明滅の速さは animation の秒数、光の強さは影のぼかし半径で調整できます。注意点として、濃い暗背景でこそ映える表現なので明るいページには不向きです。常時点滅は刺激が強いため、てんかんなどに配慮し prefers-reduced-motion で明滅を止める設定を併用すると安全です。文字色と背景のコントラストも十分確保しましょう。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
発光する色を青や緑に変えられますか
変えられます。CSSの中でマゼンタのカラーコードが枠線・影・文字色に何度か出てくるので、それらを同じ色にまとめて置き換えるだけです。明るく彩度の高い色ほどネオンらしく光ります。
明るい白背景のページでも見栄えしますか
あまり向きません。この発光表現は暗い背景の上でこそ光が際立つ仕組みです。白背景で使うと光がぼやけて見えるため、その場合は影を濃くするか、ボタン周辺だけ暗い帯を敷く工夫が必要です。