18 CSS Play / Pause Button Designs

components ui templates

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.

18 unique buttons 100% copy-paste ready Published May 4, 2026

01 / 18

Morph Triangle

Light JS

A play triangle that morphs into two pause bars via SVG path interpolation.

Live Demo Try it

02 / 18

Vinyl Record

Light JS

A miniature vinyl record.

Live Demo Try it

03 / 18

Equaliser Bars

Light JS

Three vertical bars that animate height while playing and freeze instantly when paused.

Live Demo Try it

04 / 18

Skip Hub

Light JS

Full media-control cluster with previous, play/pause and next buttons.

Live Demo Try it

05 / 18

Liquid Wave

Light JS

A continuous waveform travels across the button while playing and freezes mid-cycle on pause.

Live Demo Try it

06 / 18

Pulse Halo

Light JS

Concentric halo rings emanate outward while playing — a soft pulse that signals "live" or "active" without distraction.

Best forradio streams, live broadcasts, and listen-now CTAs.

Live Demo Try it

07 / 18

Toggle Pill

Light JS

iOS-style sliding toggle — but for play/pause.

Live Demo Try it

08 / 18

Neon Arcade

Light JS

Stacked neon-cyan glow with monospace label.

Live Demo Try it

09 / 18

Minimal Outline

Light JS

Refined outline-only button with a hairline border and subtle hover lift.

Live Demo Try it

10 / 18

Gradient Disc

Light JS

A `@property`-animated conic gradient rim that rotates while playing — true CSS angle animation, not a keyframes hack.

Live Demo Try it

11 / 18

Voice Memo

Light JS

Record-style red button with a tiny live waveform indicator.

Live Demo Try it

12 / 18

Floating FAB

Light JS

Material-style floating action button with elevation that lifts on hover and presses down on click.

Live Demo Try it

13 / 18

Progress Ring

Light JS

A circular play button wrapped by an SVG progress ring that fills as audio plays.

Live Demo Try it

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.

Live Demo Try it

15 / 18

Liquid Drop

Light JS

Organic blob shape that morphs its border-radius on play — like a droplet of mercury reshaping itself.

Live Demo Try it

16 / 18

Ripple on Click

Light JS

Material-style ink ripple that emanates from the click point on every press.

Live Demo Try it

17 / 18

Cassette Tape

Light JS

Skeumorphic mini-cassette with two reels that rotate while playing and freeze instantly on pause.

Live Demo Try it

18 / 18

Live Badge

Light JS

Live-broadcast pill with a breathing background and a tiny presence dot.

Best forlive podcasts, watch-parties, and Twitch-style streams.

Live Demo Try it

Build your own

Tweak the exact look in our visual generators — no signup, instant copy-paste.

Generator

CSS Clip-Path Generator

Cut the triangle play icon with clip-path.

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 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 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

27 CSS Calendar Designs

27 hand-coded CSS calendar designs covering every search intent for 'css calendar' — pure-CSS calendar (no JavaScript), CSS Grid layouts, glassmorphism widgets, brutalist designs, dark mode UIs, neumorphic cards, horizontal timelines, sidebar widgets, booking date-range pickers, CSS Grid advent calendars, Fluent / Material Design, circular / radial layouts, retro neon cyberpunk, 3D flip cards, isometric dashboards, split-screen heroes, liquid micro-interactions, bento grid booking, vintage paper tear-offs, vertical timelines, kinetic typography, and slanted diagonal grids. 1 truly pure-CSS, 26 with small vanilla JS snippets for event handling. Scoped class names that never collide, prefers-reduced-motion respected, MIT-licensed.

css calendar css calendar design css calendar widget Responsive