Neon Glow Button
ネオンサインのように光るボタン。暗い背景のLPに。
HTML
<div style="background:#111;padding:30px;border-radius:12px;display:flex;justify-content:center"> <button class="neon-btn">Neon</button> </div>
CSS
.neon-btn {
padding: 12px 36px;
background: transparent;
color: #4ade80;
border: 1px solid #4ade80;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
text-shadow: 0 0 8px rgba(74,222,128,.6);
box-shadow: 0 0 8px rgba(74,222,128,.2), inset 0 0 8px rgba(74,222,128,.1);
animation: neon-flicker 3s ease-in-out infinite;
}
@keyframes neon-flicker {
0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(74,222,128,.3), inset 0 0 8px rgba(74,222,128,.1); }
50% { opacity: .85; box-shadow: 0 0 20px rgba(74,222,128,.5), inset 0 0 12px rgba(74,222,128,.2); }
}