32+ CSS Play/Pause Buttons

A visually stunning 32+ HTML and CSS play and pause button code snippets for for web designers, front-end developers, and UX/UI designers. Try it now!

1. YouTube Play/Pause Button – Take 2

See the Pen <a href="https://codepen.io/kylelavery88/pen/BKwRpp"> YouTube Play/Pause Button – Take 2</a> by Kyle Lavery (<a href="https://codepen.io/kylelavery88">@kylelavery88</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kyle Lavery
Source: Code / Demo
Created on: APRIL 1, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JS

2. CSS3 PLAY/PAUSE BUTTON

See the Pen <a href="https://codepen.io/stevenfabre/pen/KKPJyW"> CSS3 PLAY/PAUSE BUTTON</a> by Steven Fabre (<a href="https://codepen.io/stevenfabre">@stevenfabre</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Steven Fabre
Source: Code / Demo
Created on: FEBRUARY 26, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

3. Play/pause button animation

See the Pen <a href="https://codepen.io/morgun/pen/ALYBaX"> Play/pause button animation</a> by Dmitry Khavilo (<a href="https://codepen.io/morgun">@morgun</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dmitry Khavilo
Source: Code / Demo
Created on: SEPTEMBER 5, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

4. Play/Pause Button Animation

See the Pen <a href="https://codepen.io/Wryte/pen/vgPQpp"> Play/Pause Button Animation</a> by Craig Dykstra (<a href="https://codepen.io/Wryte">@Wryte</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Craig Dykstra
Source: Code / Demo
Created on: FEBRUARY 16, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

5. Morphing Play/Pause Button

See the Pen <a href="https://codepen.io/Hazem/pen/OyZamW"> Morphing Play/Pause Button</a> by Hazem (<a href="https://codepen.io/Hazem">@Hazem</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hazem
Source: Code / Demo
Created on: OCTOBER 29, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

6. Neumorphic Music Player UI

See the Pen <a href="https://codepen.io/jackdomleo7/pen/GRpaNGp"> Neumorphic music player UI</a> by Jack Domleo (<a href="https://codepen.io/jackdomleo7">@jackdomleo7</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jack Domleo
Source: Code / Demo
Created on: MAY 27, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

7. A Morphing Play-Pause Button for HTML5 Video with SVG

See the Pen <a href="https://codepen.io/dudleystorey/pen/MeXgmo"> A Morphing Play-Pause Button for HTML5 Video with SVG</a> by Dudley Storey (<a href="https://codepen.io/dudleystorey">@dudleystorey</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dudley Storey
Source: Code / Demo
Created on: JULY 26, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

8. neumorphism play button

See the Pen <a href="https://codepen.io/souravb786/pen/qBreLBK"> neumorphism play button</a> by souravb786 (<a href="https://codepen.io/souravb786">@souravb786</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: souravb786
Source: Code / Demo
Created on: JUNE 25, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Play Button

See the Pen <a href="https://codepen.io/ivillacreative/pen/obzqMm"> Play Button</a> by Ivan Villa (<a href="https://codepen.io/ivillacreative">@ivillacreative</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ivan Villa
Source: Code / Demo
Created on: DECEMBER 26, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

10. Youtube play/pause button

See the Pen <a href="https://codepen.io/sohrabzia/pen/weBpVz"> Youtube play/pause button </a> by Sohrab zia (<a href="https://codepen.io/sohrabzia">@sohrabzia</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sohrab zia
Source: Code / Demo
Created on: JUNE 5, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

11. Flashing play button

See the Pen <a href="https://codepen.io/GLITCHY99/pen/wVopWz"> Flashing play button</a> by Da Vinci (<a href="https://codepen.io/GLITCHY99">@GLITCHY99</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Da Vinci
Source: Code / Demo
Created on: JULY 27, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. play button

See the Pen <a href="https://codepen.io/mahtamunhoquefahim/pen/vYmjZJm"> Play Button</a> by Mahtamun Hoque Fahim (<a href="https://codepen.io/mahtamunhoquefahim">@mahtamunhoquefahim</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mahtamun Hoque Fahim
Source: Code / Demo
Created on: JULY 30, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Play/pause Button Morphing

See the Pen <a href="https://codepen.io/zhangzhuo/pen/LNGLOz"> play/pause button morphing</a> by ZhangZhuo (<a href="https://codepen.io/zhangzhuo">@zhangzhuo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: ZhangZhuo
Source: Code / Demo
Created on: MARCH 7, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Music Player | Audio Player 🎵

See the Pen <a href="https://codepen.io/singhimalaya/pen/QZKqOX"> Music Player | Audio Player 🎵</a> by Himalaya Singh (<a href="https://codepen.io/singhimalaya">@singhimalaya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Himalaya Singh
Source: Code / Demo
Created on: OCTOBER 6, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Bouncing Play Button

See the Pen <a href="https://codepen.io/mi-ca/pen/MpobrZ"> bouncing play button</a> by mica (<a href="https://codepen.io/mi-ca">@mi-ca</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: mi-ca
Source: Code / Demo
Created on: MARCH 13, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. emircom play button animation

See the Pen <a href="https://codepen.io/Griezzi/pen/mdOzrWP"> emircom play button animation</a> by Shivam Bale (<a href="https://codepen.io/Griezzi">@Griezzi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shivam Bale
Source: Code / Demo
Created on: MARCH 8, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. A CSS Play Button

See the Pen <a href="https://codepen.io/thaipoplade/pen/PNwGWm"> A CSS play button </a> by Thaiana Poplade (<a href="https://codepen.io/thaipoplade">@thaipoplade</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Thaiana Poplade
Source: Code / Demo
Created on: MARCH 1, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Play Button

See the Pen <a href="https://codepen.io/lukemeyrick/pen/qdxqwM"> Play Button</a> by Luke Meyrick (<a href="https://codepen.io/lukemeyrick">@lukemeyrick</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Luke Meyrick
Source: Code / Demo
Created on: JULY 1, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

19. Add Play Pause Button

See the Pen <a href="https://codepen.io/Yeti_Detective/pen/XqVBgW"> Add Play Pause Button <div></a> by Chris (<a href="https://codepen.io/Yeti_Detective">@Yeti_Detective</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris
Source: Code / Demo
Created on: MAY 8, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

20. Funky Play button

See the Pen <a href="https://codepen.io/a_ng_d/pen/RwWMYbY"> 💛 Funky 💜 Play button</a> by Aurélien Grimaud (<a href="https://codepen.io/a_ng_d">@a_ng_d</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aurélien Grimaud
Source: Code / Demo
Created on: MAY 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass)

21. Play Button

See the Pen <a href="https://codepen.io/jscottsmith/pen/azRObp"> Play Button</a> by J Scott Smith (<a href="https://codepen.io/jscottsmith">@jscottsmith</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: J Scott Smith
Source: Code / Demo
Created on: MARCH 11, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

22. Clip-path Play/pause Button Transition

See the Pen <a href="https://codepen.io/iremlopsum/pen/rMOZBe"> Clip-path play/pause button transition</a> by Irem Lopsum (<a href="https://codepen.io/iremlopsum">@iremlopsum</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Irem Lopsum
Source: Code / Demo
Created on: SEPTEMBER 11, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

23. A Play Button Animation

See the Pen <a href="https://codepen.io/ebrewe/pen/mwaNqE"> A play button animation</a> by Eric Brewer (<a href="https://codepen.io/ebrewe">@ebrewe</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Eric Brewer
Source: Code / Demo
Created on: JULY 13, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (SCSS), JavaScript(Babel)

24. Play Button (Pulse Effect) to video embed overlay

See the Pen <a href="https://codepen.io/rojo_salas/pen/BaKKaav"> Play Button (Pulse Effect) to video embed overlay</a> by Rojo Salas (<a href="https://codepen.io/rojo_salas">@rojo_salas</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rojo Salas
Source: Code / Demo
Created on: AUGUST 14, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

25. Play Button

See the Pen <a href="https://codepen.io/b29/pen/jmNvJq"> Play Button</a> by Baron (<a href="https://codepen.io/b29">@b29</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Baron
Source: Code / Demo
Created on: APRIL 12, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

26. Proof of concept: Play Button

See the Pen <a href="https://codepen.io/hofmannsven/pen/qJyNoa"> Proof of concept: Play Button</a> by Sven (<a href="https://codepen.io/hofmannsven">@hofmannsven</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sven
Source: Code / Demo
Created on: OCTOBER 22, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

27. YouTube Style Play Button

See the Pen <a href="https://codepen.io/injms/pen/rNOOYY"> YouTube style play button</a> by Ian James (<a href="https://codepen.io/injms">@injms</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ian James
Source: Code / Demo
Created on: MARCH 26, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. Pure CSS Play / Pause Video Button

See the Pen <a href="https://codepen.io/michaelpumo/pen/Qyvqbp"> Pure CSS Play / Pause Video Button</a> by Michael Pumo (<a href="https://codepen.io/michaelpumo">@michaelpumo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Michael Pumo
Source: Code / Demo
Created on: JANUARY 8, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

29. Google Play Button With CSS

See the Pen <a href="https://codepen.io/dibalikseo/pen/PKrJmJ"> Google Play Button With CSS</a> by dibalikseo (<a href="https://codepen.io/dibalikseo">@dibalikseo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: dibalikseo
Source: Code / Demo
Created on: SEPTEMBER 8, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Play pause button

See the Pen <a href="https://codepen.io/ainalem/pen/MWYrojE"> Play pause button</a> by Mikael Ainalem (<a href="https://codepen.io/ainalem">@ainalem</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mikael Ainalem
Source: Code / Demo
Created on: JANUARY 6, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

31. Border Spin Animation For Play/pause Buttons

See the Pen <a href="https://codepen.io/wazp/pen/NwwbvW"> Border Spin animation for play/pause buttons</a> by Patrick Waks (<a href="https://codepen.io/wazp">@wazp</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Patrick Waks
Source: Code / Demo
Created on: NOVEMBER 16, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript(Babel)

32. Taylors Play Button

See the Pen <a href="https://codepen.io/alongequeue/pen/weWoLv"> Taylors play button</a> by Arnold Longequeue (<a href="https://codepen.io/alongequeue">@alongequeue</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Arnold Longequeue
Source: Code / Demo
Created on: JUNE 13, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

33. Play Pause Button Interaction | Clip-Path | CSS

See the Pen <a href="https://codepen.io/NaveenPantra/pen/JjajEgO"> Play ⏯ Pause Button Interaction | Clip-Path | CSS</a> by Naveen Pantra (<a href="https://codepen.io/NaveenPantra">@NaveenPantra</a>) on <a href="https://codepen.io">CodePen</a>. Author: Naveen Pantra
Source: Code / Demo
Created on: FEBRUARY 14, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS