Top 10 CSS Play/Pause Buttons

Hello guys in this tutorial, we are going to learn how to create Play/Pause Buttons using HTML & CSS and also I have listed Top 10 play button examples which are available on CodePen.

Making a Pure CSS Play/Pause Button

Step 1 — Creating a New Project

In this step, we need to create a new project folder and files (index.htmlstyle.css and, main.js) In the next step, we will start creating the structure of the webpage.

Step 2 — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Making a Pure CSS Play/Pause Button</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta https-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <!-- Add jQuery library -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    

   <!-- Add Main.js File -->
   <script src="main.js"></script>
  </body>
</html>

This is the base structure of most web pages that use HTML.

Add the following code inside the <body> tag:

<a href="#" title="Play/Pause" class="play"></a>

Step 3 — Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

.play {
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 60px solid #4b00ff;
  margin: 100px auto 50px auto;
  position: relative;
  z-index: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  left: 10px;
}
.play:after {
  content: "";
  opacity: 0;
  transition: opacity 0.6s;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
}
.play:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.play.active {
  border-color: transparent;
}
.play.active:after {
  content: "";
  opacity: 1;
  width: 50px;
  height: 80px;
  background: #4b00ff;
  position: absolute;
  right: 5px;
  top: -40px;
  border-left: 20px solid #4b00ff;
  box-shadow: inset 30px 0 0 0 #f9f9f9;
}

Step 4 — Adding jQuery code

In this step, we will add some jQuery code to build [ Play/Pause Button ] in main.js file

$(document).ready(function() {
  var pp_btn = $('.play');
  pp_btn.click(function() {
     pp_btn.toggleClass('active');
     return false;
  });
});

#Final Result

Making a Pure CSS Play Pause Button

Best collection of CSS Play/Pause Button

In this collection, I have listed Top 10 Play/Pause Button. Check out these Awesome Button Design like: #1YouTube Style Play Button, #2Animated Play Button, #3Taylors play button, and many more.

#1 Google Play Button With CSS

Google Play Button With CSS

Awesome Google Play Button, which was developed by dibalikseo. Moreover, you can customize it according to your wish and need.

Author:dibalikseo
Created on:September 8, 2017
Made with:HTML & CSS
Demo Link:Source Code / Demo
Tags:Google Play Button

#2 Border Spin animation for play/pause buttons

Border Spin animation for play pause buttons

Border Spin animation for play/pause buttons, which was developed by Patrick Waks. Moreover, you can customize it according to your wish and need.

Author:Patrick Waks
Created on:November 17, 2017
Made with:HTML, CSS(Less) & JS
Demo Link:Source Code / Demo
Tags:Border Spin Play Button

#3 A Simple Play Button Animation

A Simple Play Button Animation

A Simple Play Button Animation, which was developed by Eric Brewer. Moreover, you can customize it according to your wish and need.

Author:Eric Brewer
Created on:July 13, 2017
Made with:HTML(Pug), CSS(SCSS) & JS
Demo Link:Source Code / Demo
Tags:Simple Play Button

#4 Play Button (Yellow, Pulse Effect)

Yellow Play Button

Simple Yellow Play Button With Pulse Effect, which was developed by Rojo Salas. Moreover, you can customize it according to your wish and need.

Author:Rojo Salas
Created on:August 14, 2020
Made with:HTML, CSS & JS
Demo Link:Source Code / Demo
Tags:Play Button With Pulse Effect

#5 YouTube Style Play Button

YouTube Style Play Button

YouTube Style Play Button, which was developed by Ian James. Moreover, you can customize it according to your wish and need.

Author:Ian James
Created on:March 26, 2014
Made with:HTML & CSS
Demo Link:Source Code / Demo
Tags:YouTube Style Play Button

#6 HTML Play Button

Simple Play Button

HTML Play Button, which was developed by Thaiana Poplade. Moreover, you can customize it according to your wish and need.

Author:Thaiana Poplade
Created on:March 1, 2016
Made with:HTML & CSS
Demo Link:Source Code / Demo
Tags:HTML Play Button

#7 HTML & CSS Play Button

HTML & CSS Play Button

HTML & CSS Play Button, which was developed by Ivan Villa. Moreover, you can customize it according to your wish and need.

Author:Ivan Villa
Created on:December 26, 2015
Made with:HTML & CSS(SCSS)
Demo Link:Source Code / Demo
Tags:HTML & CSS Play Button

#8 Animated Play Button

Animated Play Button

Animated Play Button, which was developed by Luke Meyrick. Moreover, you can customize it according to your wish and need.

Author:Luke Meyrick
Created on:July 1, 2015
Made with:HTML & CSS(SCSS)
Demo Link:Source Code / Demo
Tags:Animated Play Button

#9 Awesome Play Button

Awesome Play Button

Awesome Play Button, which was developed by J Scott Smith. Moreover, you can customize it according to your wish and need.

Author:J Scott Smith
Created on:March 11, 2015
Made with:HTML & CSS(SCSS)
Demo Link:Source Code / Demo
Tags:Awesome Play Button

#10 Taylors play button

Taylors play button

Taylors play button, which was developed by Arnold Longequeue. Moreover, you can customize it according to your wish and need.

Author:Arnold Longequeue
Created on:June 13, 2017
Made with:HTML & CSS(SCSS)
Demo Link:Source Code / Demo
Tags:Taylors play button
If you liked this article Top 10 CSS Play/Pause Button Examples, you should check out this one Top 10 CSS Submit Button examples.

Leave a Comment