pulse border ring attention glow notification sonar draw attention to CTA button highlight new or unread notification indicate active or live status onboarding focus indicator need attention-grabbing effect without being aggressive want pulsing ring around a button or avatar need visual indicator for live or active state
Pulse Border
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/pulse-border.json Preview
Background
Customize
Quick Start
<button class="pulse-border rounded-lg bg-indigo-600 px-6 py-3 text-white">New Feature</button>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 640 bytes · 34 lines
- Custom Properties
-
--pulse-color--pulse-speed--pulse-radius - Classes
-
.pulse-border
pulse border ring attention glow notification sonar
A border ring that continuously expands outward and fades to zero. Uses a ::before pseudo-element with scale and opacity animation. Subtle enough for permanent use (live indicators, unread badges) but eye-catching enough for CTAs.
Attention button
<button class="pulse-border rounded-xl bg-indigo-600 px-6 py-3 font-medium text-white">
Try it free
</button>Live indicator dot
<span class="pulse-border inline-block h-3 w-3 rounded-full bg-emerald-500"
style="--pulse-color: oklch(0.7 0.2 160); --pulse-radius: 9999px; --pulse-speed: 1.5s;">
</span>Notification badge
<div class="pulse-border inline-flex items-center gap-2 rounded-full bg-amber-500/10 px-4 py-1.5 text-sm font-medium text-amber-400"
style="--pulse-color: oklch(0.7 0.15 80); --pulse-radius: 9999px;">
3 new messages
</div>