Audio Play Button
A Listen pill for podcasts and voice notes: a round play icon, the label and five equalizer bars that bounce out of step. Each bar scales from its baseline on its own timing, so it never looks looped.
Also known as: play button with sound wave, podcast listen button css, equalizer animation button.
HTML
<button class="btn-audio-play" type="button"> <span class="btn-audio-play-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.5v13l10.5-6.5z"/></svg></span> Listen <span class="btn-audio-play-bars" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span> </button>
CSS
.btn-audio-play {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
gap: 0.7em;
padding: 0.4em 1.2em 0.4em 0.4em;
border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
border-radius: 2em;
background: color-mix(in srgb, var(--c) 8%, transparent);
color: inherit;
transition: background-color 0.25s ease, transform 0.15s ease;}
.btn-audio-play-icon {
display: grid;
place-items: center;
width: 2.2em;
height: 2.2em;
border-radius: 50%;
background: var(--c);
color: #fff;
}
.btn-audio-play-icon svg {
width: 1em;
height: 1em;
margin-left: 0.1em;
}
.btn-audio-play-bars {
display: flex;
align-items: flex-end;
gap: 0.16em;
height: 1.1em;
}
.btn-audio-play-bars i {
width: 0.2em;
height: 100%;
border-radius: 0.1em;
background: var(--c);
transform-origin: 50% 100%;
animation: btn-audio-play-eq 0.9s ease-in-out infinite alternate;
}
.btn-audio-play-bars i:nth-child(2) { animation-duration: 0.62s; animation-delay: -0.3s; }
.btn-audio-play-bars i:nth-child(3) { animation-duration: 0.78s; animation-delay: -0.5s; }
.btn-audio-play-bars i:nth-child(4) { animation-duration: 0.55s; animation-delay: -0.2s; }
.btn-audio-play-bars i:nth-child(5) { animation-duration: 0.84s; animation-delay: -0.65s; }
.btn-audio-play:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 16%, transparent); }
.btn-audio-play:active { transform: scale(0.97); }
@keyframes btn-audio-play-eq {
from { transform: scaleY(0.2); }
to { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
.btn-audio-play, .btn-audio-play *, .btn-audio-play::before, .btn-audio-play::after, .btn-audio-play *::before, .btn-audio-play *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.