Neon Pulse CTA
ネオンの脈動グローが呼吸のように光るCTAボタン。@propertyでグロー半径をアニメーション。
HTML
<button class="npc-btn">Subscribe</button>
CSS
@property --npc-glow {
syntax: '<length>';
initial-value: 4px;
inherits: false;
}
.npc-btn {
padding: 14px 40px;
background: #0f0f0f;
color: #22d3ee;
border: 1px solid #22d3ee;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
box-shadow: 0 0 var(--npc-glow) #22d3ee, inset 0 0 var(--npc-glow) rgba(34,211,238,0.1);
animation: npc-pulse 2s ease-in-out infinite;
}
@keyframes npc-pulse {
0%, 100% { --npc-glow: 4px; }
50% { --npc-glow: 20px; }
}