ネオンボタンジェネレーターは、SVGフィルタでボタンの縁(リム)だけを光らせるCSSボタンを作る無料ツールです。15種の光パターンから選び、色・サイズを調整して、そのまま貼り付けられるHTML/CSSを出力できます。
使い方（3ステップ）
- 15種の光パターンから好きなものをボタンで選ぶ
- 色・太さ・角丸・滲み・回転速度などを調整する
- 出力されたHTMLとCSSをコピーして貼り付ける
15種の光パターン早見表
| パターン | 特徴 |
|---|---|
| 方向ライト | 片側から当たるスイープ光（feDistantLight） |
| ポイント | 一点が強く光る（放射状グラデ） |
| アークシャイン | 縁の一部が滑らかに艶めく艶掃き |
| ビームグロー | 焦点を持つ光だまりが縁の一点に集まる |
| グロスシャイン | ガラスのような対角の艶反射が縁に走る |
| ネオン | 縁全体が均一に発光 |
| デュアル | 両側を2色で照らす |
| グラデーション | 多色グラデが縁を流れる |
| トライ | 3色を3方向から |
| パルス | 縁全体がゆっくり明滅（ブリージング） |
| チェイス | 光の帯が縁を周回 |
| フリッカー | ネオン管風のランダム明滅 |
| 二重リム | 内外2層が別色で光る |
| アンダーグロー | 下方向の床反射のような光 |
| コーナー | 四隅が放射状に光る |
よくある質問
どんなボタンが作れますか？
ボタンの縁(リム)が光るCSSボタンを作れます。方向ライト・ネオン・グラデーション・アークシャイン・二重リム・アンダーグローなど15種の光パターンから選び、色・太さ・角丸・滲みを調整できます。
出力したコードはそのまま使えますか？
はい。HTMLとCSSの2ブロックをコピーして貼るだけで動きます。外部ライブラリ依存はなく、SVGフィルタを含む自己完結のコードを出力します。
光るアニメーションも出力されますか？
はい。自動回転をONにすると、パターンに応じた回転・明滅などのアニメーション用JavaScriptが出力コードに添付されます。貼り付け先でもそのまま動きます。
どのブラウザで表示されますか？
SVGフィルタ（feSpecularLighting・feGaussianBlur など）に対応する Chrome・Edge・Safari・Firefox などの主要ブラウザで表示されます。
商用利用できますか？
はい。無料で、生成したボタンは商用サイトでも利用できます。