18 CSS Play / Pause Button Designs
Advertisement
A CSS play / pause button is the toggle that starts and stops media playback in a player UI. These 18 hand-coded designs are ready-to-ship controls for audio players, podcast apps, video players, and music UIs — copy the markup, wire your media handler, and ship.
01 / 18
Morph Triangle
Light JS 
A play triangle that morphs into two pause bars via SVG path interpolation. The icon never disappears — it transforms — which feels meaningfully more premium than a hard swap.
02 / 18
Vinyl Record
Light JS 
A miniature vinyl record. While playing it spins continuously; on pause the rotation slows to a stop with a subtle ease-out — the canonical music-app metaphor done as a single CSS button.
03 / 18
Equaliser Bars
Light JS 
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.
04 / 18
Skip Hub
Light JS 
Full media-control cluster with previous, play/pause and next buttons. The central button uses a morph icon with a gradient halo while playing — the canonical pattern for music players and podcast apps.
05 / 18
Liquid Wave
Light JS 
A continuous waveform travels across the button while playing and freezes mid-cycle on pause. Built with an SVG path + CSS transform — perfect for audio players and music-streaming UIs.
06 / 18
Pulse Halo
Light JS 
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.
07 / 18
Toggle Pill
Light JS 
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.
08 / 18
Neon Arcade
Light JS 
Stacked neon-cyan glow with monospace label. The play / pause icon sits inside a glowing ring that pulses while playing — synthwave 80s arcade vibes for gaming, retro media, and dev tools.
09 / 18
Minimal Outline
Light JS 
Refined outline-only button with a hairline border and subtle hover lift. The icon morphs cleanly between play and pause — an editorial, restrained pattern for content-heavy sites.
10 / 18
Gradient Disc
Light JS 
A `@property`-animated conic gradient rim that rotates while playing — true CSS angle animation, not a keyframes hack. Feels like a turntable or a high-end audio interface dial.
11 / 18
Voice Memo
Light JS 
Record-style red button with a tiny live waveform indicator. The waveform animates while playing back; freezes when paused. Specifically tuned for voice notes, podcasts, and dictation UIs.
12 / 18
Floating FAB
Light JS 
Material-style floating action button with elevation that lifts on hover and presses down on click. The icon morphs between play and pause — a polished pattern for full-screen video and tutorial overlays.
13 / 18
Progress Ring
Light JS 
A circular play button wrapped by an SVG progress ring that fills as audio plays. Tick the percentage from your real <code>timeupdate</code> events — gold/cream palette suited to podcast and audiobook UIs.
14 / 18
Magnetic Hover
Light JS 
A play button whose icon subtly drifts toward the cursor on hover — a small touch of physicality that signals an interactive surface. Click to play; the icon morphs and the magnet effect releases.
15 / 18
Liquid Drop
Light JS 
Organic blob shape that morphs its border-radius on play — like a droplet of mercury reshaping itself. Mint-fresh palette for wellness and meditation apps.
16 / 18
Ripple on Click
Light JS 
Material-style ink ripple that emanates from the click point on every press. Click feedback that reads as tactile instantly — a subtle but premium detail.
17 / 18
Cassette Tape
Light JS 
Skeumorphic mini-cassette with two reels that rotate while playing and freeze instantly on pause. Warm tactile detail for retro music players, lo-fi radio apps, and nostalgic brand moments.
Advertisement
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
What's the right HTML for a play / pause button?
A single button type=button with aria-pressed reflecting the playing state, and an aria-label that updates between Play and Pause. A single toggle button beats two separate buttons because it's exactly one tap target, one keyboard focus stop, and one screen-reader announcement.
How do I morph a play icon into a pause icon in pure CSS?
Two reliable techniques: (1) two SVGs stacked — fade/scale one out and the other in via :checked or aria-pressed; or (2) a single SVG path with the d attribute animated via CSS — newer browsers support transition on path d. The first works everywhere; the second feels more premium.
Should a play button keep animating while paused?
No. The visual rule is: motion = playing, stillness = paused. Spinning vinyl freezes, equaliser bars flatten, waveforms stop mid-cycle. This is what users expect and it's the strongest single signal of state.
Are these accessible to keyboard and screen-reader users?
Yes. Each demo is a real button with aria-pressed, an updating aria-label, and a visible focus state. Continuous animations honour prefers-reduced-motion. The toggle works with Space and Enter keys, and screen readers announce both the role and the current state.
Do these play / pause buttons work in any framework?
Yes. Plain HTML, CSS and (where used) vanilla JS — no dependencies. Drop into React, Vue, Svelte, Astro or plain HTML; bind your own click handler to start/stop your audio or video element. MIT licensed.
Related collections
22 CSS Button Group Designs
22
22 dynamic CSS button groups with motion-driven interactions — plasma loops, holographic gradients, magnetic discs, wormhole tabs, particle aurora. Pure CSS or light JS, copy-paste ready.
button group css button group segmented control
Responsive
43 CSS Button Designs
43
43 hand-coded CSS buttons — real-world materials like brushed brass and vinyl, interactive use-case buttons (add-to-cart, download, like, delete), and click-effect studies: magnetic mercury ripple, brutalist glitch, neon plasma burst, clay press, ink spread, and particle shards.
buttons hover animation
Responsive
20 CSS Cards with Animations
20
20 hand-crafted CSS card components — aurora glow, 3D tilt, glassmorphism, neon borders, flip card, pricing, terminal, music player, weather widget and more.
cards components animation
Responsive