18 CSS Play / Pause Button Designs
Equaliser Bars
Three vertical bars that animate height while playing and freeze instantly when paused. Doubles as both a button and a "now playing" indicator — perfect for podcast and audio UIs.
Equaliser Bars the 3rd 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-eq" type="button" aria-pressed="false" aria-label="Play" data-pp> <span class="pp-eq-bars" aria-hidden="true"> <span></span><span></span><span></span> </span> </button>
.pp-eq {
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(20, 184, 166, 0.08);
border: 1px solid rgba(20, 184, 166, 0.3);
color: #2dd4bf;
display: grid;
place-items: center;
cursor: pointer;
transition:
background 0.2s,
border-color 0.2s,
transform 0.15s;
}
.pp-eq:hover {
background: rgba(20, 184, 166, 0.16);
border-color: rgba(20, 184, 166, 0.5);
transform: translateY(-1px);
}
.pp-eq:focus-visible {
outline: 3px solid rgba(20, 184, 166, 0.4);
outline-offset: 3px;
}
.pp-eq-bars {
display: flex;
align-items: center;
gap: 4px;
height: 22px;
}
.pp-eq-bars > span {
width: 4px;
height: 100%;
background: currentColor;
border-radius: 2px;
transform: scaleY(0.3);
transform-origin: center;
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(1) {
transform: scaleY(0.4);
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(2) {
transform: scaleY(0.7);
}
.pp-eq[aria-pressed="false"] .pp-eq-bars > span:nth-child(3) {
transform: scaleY(0.5);
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span {
animation: ppEqDance 0.9s ease-in-out infinite;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(1) {
animation-delay: 0s;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(2) {
animation-delay: 0.2s;
}
.pp-eq[aria-pressed="true"] .pp-eq-bars > span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes ppEqDance {
0%,
100% {
transform: scaleY(0.3);
}
50% {
transform: scaleY(1);
}
}
@media (prefers-reduced-motion: reduce) {
.pp-eq,
.pp-eq * {
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
Ripple on ClickCassette TapeLive BadgeMorph TriangleVinyl RecordSkip HubLiquid WavePulse HaloToggle PillNeon ArcadeMinimal OutlineGradient Disc
View the full collection →