Playground

Playground · 18 demos

CSS Play/Pause Buttons Playground

Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.

Or browse the full CSS Play/Pause Buttons collection for the gallery view with code panels.

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.

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.

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.

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.

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.

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.

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.

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.

Minimal Outline

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.

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.

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.

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.

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.

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.

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.

Ripple on Click

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.

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.

Live-broadcast pill with a breathing background and a tiny presence dot. Click to join — the dot starts pinging, the gradient shifts to "on-air" warm red. Perfect for live podcasts, watch-parties, and Twitch-style streams.