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.html, style.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
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
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, 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, 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)
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, 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
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, 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, 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, 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, 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.