Collection of hand-picked free HTML and CSS play/pause button code examples from Codepen, GitHub and other resources. Update of October 2021 collection. 2 new items.

Related Articles

  1. CSS Buttons
  2. CSS Button Hover Effects
  3. CSS 3D Buttons
  4. CSS Submit Buttons
  5. CSS Gradient Buttons
  6. CSS Flat Buttons
  7. CSS Close Buttons
  8. CSS Download Buttons
  9. CSS Button Click Effects
  10. CSS Button Libraries

Author

  • Mahtamun Hoque Fahim

Links

Made with

  • HTML / CSS

About a code

Play Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • souravb786

Links

Made with

  • HTML / CSS

About a code

Neumorphism Play Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Shivam Bale

Links

Made with

  • HTML / CSS

About a code

Play Button Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • AurĂ©lien Grimaud

Links

Made with

  • HTML (Pug) / CSS (Sass)

About a code

Funky Play Button

A freshly animated play/pause button, to engage user from interacting with this call to action. Only CSS has been used to set these animated shapes and typographies.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mikael Ainalem

Links

Made with

  • HTML / CSS

About a code

Play Pause Button

Play and pause button. Created with clip-path morphing and CSS transitions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Da Vinci

Links

Made with

  • HTML / CSS

About a code

Flashing Play Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Sven

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Play Button

Simple play button in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Play Button Animation Play Button Animation - GIF Demo

Author

  • Eric Brewer

Links

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript (Babel)

About the code

Play Button Animation

Play button animation in HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: CSS Play Button CSS Play Button - GIF Demo

Author

  • Arnold Longequeue

Links

Made with

  • HTML / CSS (SCSS)

About the code

CSS Play Button

Play button with SVG and CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Play Button Play Button - GIF Demo

Author

  • Baron

Links

Made with

  • HTML / CSS

About the code

Play Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Bouncing Play Button Bouncing Play Button - GIF Demo

Author

  • mi-ca

Links

Made with

  • HTML / CSS / JavaScript

About the code

Bouncing Play Button

Bouncing play button made with bounce.js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: SVG Play Button SVG Play Button - GIF Demo

Author

  • Ivan Villa

Links

Made with

  • HTML / CSS (SCSS)

About the code

SVG Play Button

Simple play button SVG animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Play Button Play Button - GIF Demo

Author

  • Luke Meyrick

Links

Made with

  • HTML / CSS (SCSS)

About the code

Play Button

Play button with SVG and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Attractive Play Button Attractive Play Button - GIF Demo

Author

  • J Scott Smith

Links

Made with

  • HTML / CSS (SCSS)

About the code

Attractive Play Button

Play button with spinning reel on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -