ネオンボタンのCSSジェネレーター
ネオン管のような発光エフェクトを持つボタンを作成します。色や発光の強さを調整して、視認性の高いボタンを生成できます。
プレビュー
<button class="neon-btn">NEON</button>.neon-btn {
background: transparent;
color: {{neon_color}};
border: 2px solid {{neon_color}};
padding: 15px 40px;
font-size: 18px;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
text-transform: uppercase;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 0 {{glow_size}}px {{neon_color}},
inset 0 0 {{glow_size}}px {{neon_color}};
text-shadow: 0 0 5px {{neon_color}};
}
.neon-btn:hover {
background: {{neon_color}};
color: #fff;
box-shadow:
0 0 calc({{glow_size}}px * 2) {{neon_color}},
0 0 calc({{glow_size}}px * 4) {{neon_color}};
}機能、使い方
- 現代的なUIデザインに馴染む、洗練されたネオン発光エフェクトを持つボタンを生成します。
- 多重シャドウ:
box-shadowを内側（inset）と外側に重ねることで、ネオン管のようなリアルな光の広がりを表現します。 - インタラクティブ: ホバー時に背景が塗りつぶされ、発光が強調されるアニメーションを提供します。
- ダークモードのサイトや、特定の要素に視線を引きつけたい場合に適しています。
実装のヒント
cubic-bezierを使用したスムーズなアニメーションにより、最新のデバイスにマッチする質感を提供します。トランスフォームやシャドウの変化は GPU アクセラレーションにより滑らかに動作します。
より発光を際立たせるには、周囲の背景色を#0c0c0cなどの深い黒系に設定することをお勧めします。
