Ghost Button Pulse
待機時にパルスで注目を集めるゴーストボタン。
HTML
<button class="ghost-pulse">Join Waitlist</button>
CSS
.ghost-pulse {
position: relative;
padding: 12px 30px;
background: transparent;
color: #1a1a1a;
border: 1.5px solid #1a1a1a;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
}
.ghost-pulse::after {
content: '';
position: absolute;
inset: -4px;
border: 1px solid #1a1a1a;
border-radius: 12px;
opacity: 0;
animation: ghost-ring 2s ease-out infinite;
}
@keyframes ghost-ring {
0% { opacity: .4; transform: scale(1); }
100% { opacity: 0; transform: scale(1.08); }
}