20+ CSS Play/Pause Buttons - Free Code + Demos
Collection of 20+ CSS Play/Pause Buttons. All items are 100% free and open-source.
1. A Play Button Animation
Author: Eric Brewer (ebrewe)
Links: Source Code / Demo
Created on: July 12, 2017
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
2. Taylors Play Button
Author: Arnold Longequeue (alongequeue)
Links: Source Code / Demo
Created on: June 12, 2017
Made with: HTML, SCSS
3. Play Button
Simple play button SVG animation, still need to get it working on all browsers
Author: Ivan Villa (ivanvillacreative)
Links: Source Code / Demo
Created on: December 26, 2015
Made with: HTML, SCSS
Tags: svg, animation, play, button
4. Bouncing Play Button
bouncing play button made with http://bouncejs.com/
Author: mi-ca (mi-ca)
Links: Source Code / Demo, Bouncejs.com
Created on: March 13, 2017
Made with: HTML, CSS, JS
Tags: bounce, css3, animation, bouncejs
5. Play Button
Simple play button SVG animation, still need to get it working on all browsers
Author: Ivan Villa (ivanvillacreative)
Links: Source Code / Demo
Created on: December 26, 2015
Made with: HTML, SCSS
Tags: svg, animation, play, button
6. Play Button
Author: Baron (b29)
Links: Source Code / Demo
Created on: April 11, 2017
Made with: HTML, CSS
7. Play Button
Play Button with spinning reel on hover
Author: J Scott Smith (jscottsmith)
Links: Source Code / Demo
Created on: March 10, 2015
Made with: HTML, SCSS
Tags: svg, css3, button, animated
8. YouTube Style Play Button
A play button for videos that looks like YouTube's play button.
Author: Ian James (injms)
Links: Source Code / Demo
Created on: March 26, 2014
Made with: HTML, CSS
Tags: css, shapes, video, icon
9. A CSS Play Button
Author: Thaiana Poplade (thaipoplade)
Links: Source Code / Demo
Created on: February 29, 2016
Made with: HTML, CSS
10. Play/pause Button Morphing
Author: ZhangZhuo (zhangzhuo)
Links: Source Code / Demo
Created on: March 7, 2016
Made with: HTML, CSS
11. Clip-path Play/pause Button Transition
Author: Irem Lopsum (iremlopsum)
Links: Source Code / Demo
Created on: September 11, 2016
Made with: HTML, SCSS, Babel
12. Play / Pause Button In CSS
Play Button with pulse effect
Author: Rojo Salas (rojo_salas)
Links: Source Code / Demo
Created on: August 14, 2020
Made with: HTML, CSS, JS
Tags: play, button, pulse, effect, rojo
13. Add Play Pause Button <div>
Author: Chris (Yeti_Detective)
Links: Source Code / Demo
Created on: May 8, 2018
Made with: HTML, CSS, JS
14. Border Spin Animation For Play/pause Buttons
Author: Patrick Waks (wazp)
Links: Source Code / Demo
Created on: November 16, 2017
Made with: HTML, Less, Babel
15. Neumorphic Music Player UI
A simple music player buttons UI using neumorphic design.
Author: Jack Domleo (jackdomleo7)
Links: Source Code / Demo
Created on: May 26, 2020
Made with: HTML, SCSS, JS
Tags: neumorphic, vue, flat, music, play
16. Google Play Button With CSS
Author: dibalikseo (dibalikseo)
Links: Source Code / Demo
Created on: September 7, 2017
Made with: HTML, CSS
17. Morphing Play/Pause Button
Different ways of morphing a button from/to play/pause states (or any two states really) without dependencies. Built as a generalized instantiable class.
Author: Hazem (Hazem)
Links: Source Code / Demo
Created on: October 28, 2015
Made with: HTML, CSS, JS
Tags: svg, morphing, svg morphing
More Awesome Lists:
Share: