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.