Pulse glow button

A call-to-action button with a soft pulsing glow ring, built from an animated box-shadow.

button
animation
glow
pulse
cta

Color#6b46ff

Speed2s

HTML

<button class="pulse-btn">Subscribe</button>

CSS

:root {
    --glow: #6b46ff;
    --speed: 2s;
}

.pulse-btn {
    padding: 14px 30px;
    border: none;
    border-radius: 10px;
    background: var(--glow);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    animation: pulse var(--speed) ease-out infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--glow) 60%, transparent);
    }
    100% {
        box-shadow: 0 0 0 16px transparent;
    }
}

How it works

The “ping” effect is a single animated box-shadow:

It starts as a tight, semi-transparent ring the color of the button (color-mix keeps it on-brand).
The keyframes grow the shadow’s spread to 16px while fading it to transparent, so a ripple radiates outward and dissolves.

Because it’s just box-shadow, there’s no extra markup and it sits behind the button without affecting layout. Use it sparingly to draw the eye to one primary action.