18 CSS Play / Pause Button Designs
Toggle Pill
iOS-style sliding toggle — but for play/pause. The thumb glides between two icons inside a single rounded track. Reads instantly as a state-bearing control, not just a button.
Toggle Pill the 7th 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-toggle" type="button" aria-pressed="false" aria-label="Play" data-pp>
<span class="pp-toggle-icons" aria-hidden="true">
<svg viewBox="0 0 24 24" width="12" height="12">
<path d="M8 5 L8 19 L19 12 Z" fill="currentColor" />
</svg>
<svg viewBox="0 0 24 24" width="12" height="12">
<path d="M7 5 H10 V19 H7 Z M14 5 H17 V19 H14 Z" fill="currentColor" />
</svg>
</span>
<span class="pp-toggle-thumb" aria-hidden="true"></span>
</button> .pp-toggle {
position: relative;
width: 76px;
height: 38px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
cursor: pointer;
padding: 0;
transition:
background 0.2s,
border-color 0.2s;
}
.pp-toggle:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.18);
}
.pp-toggle:focus-visible {
outline: 3px solid rgba(45, 212, 191, 0.4);
outline-offset: 3px;
}
.pp-toggle-icons {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 11px;
color: #64748b;
pointer-events: none;
transition: color 0.2s;
}
.pp-toggle[aria-pressed="false"] .pp-toggle-icons :first-child {
color: #2dd4bf;
}
.pp-toggle[aria-pressed="true"] .pp-toggle-icons :last-child {
color: #2dd4bf;
}
.pp-toggle-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 30px;
height: 30px;
background: linear-gradient(135deg, #2dd4bf, #14b8a6);
border-radius: 50%;
box-shadow:
0 4px 10px -2px rgba(20, 184, 166, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
transition: transform 0.35s cubic-bezier(0.5, 0, 0.3, 1.2);
}
.pp-toggle[aria-pressed="true"] .pp-toggle-thumb {
transform: translateX(38px);
} // ── 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
Gradient DiscVoice MemoFloating FABProgress RingMagnetic HoverLiquid DropRipple on ClickCassette TapeLive BadgeMorph TriangleVinyl RecordEqualiser Bars
View the full collection →