18 CSS Play / Pause Button Designs
Pulse Halo
Concentric halo rings emanate outward while playing — a soft pulse that signals "live" or "active" without distraction. Ideal for radio streams, live broadcasts, and listen-now CTAs.
Pulse Halo the 6th of 18 designs in the 18 CSS Play / Pause Button Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<button class="pp-pulse" type="button" aria-pressed="false" aria-label="Play live" data-pp>
<span class="pp-pulse-rings" aria-hidden="true"> <span></span><span></span> </span>
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path class="pp-pulse-icon" d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
</svg>
</button> .pp-pulse {
position: relative;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #ec4899, #db2777);
border: 0;
border-radius: 50%;
color: white;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 8px 22px -6px rgba(236, 72, 153, 0.7);
transition: transform 0.15s;
z-index: 1;
}
.pp-pulse:hover {
transform: translateY(-1px);
}
.pp-pulse:focus-visible {
outline: 3px solid rgba(236, 72, 153, 0.5);
outline-offset: 3px;
}
.pp-pulse-rings {
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
z-index: -1;
}
.pp-pulse-rings > span {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid #ec4899;
opacity: 0;
transform: scale(1);
}
.pp-pulse[aria-pressed="true"] .pp-pulse-rings > span {
animation: ppPulseRipple 1.8s ease-out infinite;
}
.pp-pulse[aria-pressed="true"] .pp-pulse-rings > span:nth-child(2) {
animation-delay: 0.9s;
}
@keyframes ppPulseRipple {
0% {
opacity: 0.7;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(2);
}
}
.pp-pulse-icon {
transition: d 0.3s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-pulse[aria-pressed="true"] .pp-pulse-icon {
d: path("M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z");
}
@media (prefers-reduced-motion: reduce) {
.pp-pulse,
.pp-pulse * {
animation: none !important;
}
}
// ── Drop this on every page where you render a play/pause button ──
// Toggles aria-pressed + aria-label on click. The CSS handles all visuals.
document.querySelectorAll('[data-pp]').forEach(function (btn) {
btn.addEventListener('click', function () {
var playing = btn.getAttribute('aria-pressed') === 'true';
btn.setAttribute('aria-pressed', String(!playing));
btn.setAttribute('aria-label', !playing ? 'Pause' : 'Play');
});
}); More from 18 CSS Play / Pause Button Designs
Vinyl RecordEqualiser BarsSkip HubLiquid WaveToggle PillNeon ArcadeMinimal OutlineGradient DiscVoice MemoFloating FABProgress RingMagnetic Hover
View the full collection →