Introduction

Creating interactive elements like play and pause buttons can significantly enhance the user experience on your website. In this tutorial, we will guide you through designing and implementing play and pause buttons using CSS and jQuery. By the end of this guide, you’ll have a set of stylish and functional buttons that can control media or animations on your web page.

How to Design a play and pause button using CSS and jQuery .

Step 1: Write the HTML codes.

First of all write the HTML for the button and include the jQuery library file in your HTML. I am using online CDN for the jQuery, you can download and use it from local system.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Design Play and pause button</title>
<!-- style section goes here-->
</head>
<body>
    <a class="play-btn" href="#"></a>
    <!-- the html code for the button-->
</body>
<!-- for the pause and play button change icon we have to write js-->
<!-- for js at first define the js libary cnd-->
<co src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- script goes here-->
</html>

The CSS and jQuery written the separately but the area of CSS and JS are maintain in the HTML area.

Step 2: Write the CSS style

Next, we’ll add some CSS to style our play and pause buttons. Here i use the Class name to identify the button for write styles.

</pre>
<div>
<div>body,html {</div>
<div>    background: #444;</div>
<div>    position:relative;</div>
<div>    height:100%;</div>
<div>    width:100%;</div>
<div>    padding:0;</div>
<div>    margin:0;</div>
<div>    display: flex;</div>
<div>    align-items: center;</div>
<div>    justify-content: center;</div>
<div>  }</div>
<div></div>
<div>  .play-btn {</div>
<div>    width: 100px;</div>
<div>    height: 100px;</div>
<div>    background: radial-gradient( rgba(255, 0, 128, 0.8) 60%, rgba(255, 255, 255, 1) 62%);</div>
<div>    border-radius: 50%;</div>
<div>    position: relative;</div>
<div>    display: block;</div>
<div>    box-shadow: 0px 0px 25px 3px rgba(255, 0, 128, 0.8);</div>
<div>  }</div>
</div>
<pre>
/* triangle */
.play-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-40%)
 translateY(-50%);
  transform: translateX(-40%)
 translateY(-50%);
  transform-origin: center center;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 25px solid #fff;
  z-index: 100;
  -webkit-transition: all 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 200ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* pulse wave */
.play-btn:before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation: pulsate1 2s;
  animation: pulsate1 2s;
  -webkit-animation-direction: forwards;
  animation-direction: forwards;
  -webkit-animation-iteration-count:
 infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: steps;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, .75);
  top: -30%;
  left: -30%;
  background: rgba(198, 16, 0, 0);
}
.paused.play-btn:after {
    width: 12px;
    height: 24px;
    border-right: 4px solid #fff;
    border-left: 4px solid #fff;
    border-top: 0;
    border-bottom: 0;
  }
@-webkit-keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;

  }
}

@keyframes pulsate1 {
  0% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
    box-shadow: inset 0px 0px 25px 3px rgba(255, 255, 255, 0.75), 0px 0px 25px 10px rgba(255, 255, 255, 0.75);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1);
    opacity: 0;
    box-shadow: none;

  }
}

Step 3: Write the jQuery

Finally, we’ll use jQuery to toggle between the play and pause states when the button is clicked.

</pre>
<div>
<div>jQuery(document).ready(function() {</div>
<div>    var btn = jQuery(".play-btn"); //define the variable</div>
<div>    btn.click(function() {// the click function;</div>
<div>      btn.toggleClass("paused");// toggle class;</div>
<div>      return false;</div>
<div>    });</div>
<div>  });</div>
</div>
<pre>

Output

 

Conclusion

That’s it! You now have a stylish play and pause button that toggles between states using CSS and jQuery. This simple yet effective UI element can be used to control various types of media or animations on your website. Experiment with different styles and functionalities to make it fit your specific needs.

Additional Tips

  • Custom Icons: Replace the CSS icons with your own SVGs or images for a unique look.
  • Transitions: Add CSS transitions for a smoother toggle effect.
  • Accessibility: Ensure your buttons are accessible by adding ARIA labels and keyboard controls.

You can check out the Youtube link for the output.