Button Ripple Animation in HTML CSS and JavaScript

5
Button Ripple Animation in HTML CSS and JavaScript

Hello guys hope you are doing well, after a long time, today we are going to create something useful animation and that is Button Ripple Animation in HTML CSS and JavaScript. Also, I want to thank you all for liking my previous blog about All Hamburger Animation.

Button ripple animation is that appears on the button’s surface while the user clicks on it. Basically, this type of ripple animation is used to showing confirmation that the button has clicked. There are various animations we can get while clicking on the button, but ripple is the most popular.

Let’s have a look at the image of [Button Ripple Animation in HTML CSS and JavaScript] that I have provided on the webpage. Two images of the button are in normal form and two buttons are in the animated form and these are the real animation that is going to build.

Without further ado let’s watch the video tutorial of this program [Button Ripple Animation in HTML CSS and JavaScript], then we will get the real demo of this ripple animation on the button and the code that I have used to create this type of animation.

Button Ripple Animation in HTML CSS and JavaScript

I have provided all the source code that I have used to create this program [Button Ripple Animation in HTML CSS and JavaScript], but before jumping for the code let me cover some important points of this ripple effect on the button.

As you have seen on the video tutorial of this program [Button Ripple Animation in HTML CSS and JavaScript]. At first, we saw two-button with gradient color and this gradient color has a big hand to make this button beautiful like candy.

Actually, that ripple is an HTML tag with the class name “Ripple” which I did CSS and gave the animation and when the user clicks on the button I added that tag on the HTML by JavaScript. Have you noticed that where ever I clicked, the ripples start from there? Also to make this I have used some JavaScript code.

This is the simple but tricky animation that we have created. If you are still feeling difficulties to build this animation then you can copy-paste or download all source code files of our program [Button Ripple Animation in HTML CSS and JavaScript] from below.

You Might Like This:

Button Ripple Animation [Source Code]

To get the following source code of out today’s program [Button Ripple Animation in HTML CSS and JavaScript], you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Button Ripple Effect | CodingLab </title> 
    <link rel="stylesheet" href="style.css">
   </head>
<body>
  <div class="buttons">
    <a class="button"href="#">Button</a>
    <a class="button two" href="#">Button</a>
  </div>

  <script>
  // Ripple Effect JavaScript Code
  let buttons = document.querySelectorAll(".button");

  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", (e)=>{
      e.preventDefault(); // preventing form submitting

      let overlay = document.createElement('span'); //creating a tag(span)
      overlay.classList.add("overlay"); //adding a class inside the span
      e.target.appendChild(overlay); //adding overlay tag inside the anchor tag at in HTML

      let xValue = e.clientX - e.target.offsetLeft; //by this we get perfect value where we will click
      let yValue = e.clientY - e.target.offsetTop; //by this we get perfect value where we will click

       overlay.style.left = xValue + "px"; //changing the position of the overlay according to our clicks on the button
       overlay.style.top = yValue + "px"; //changing the position of the overlay according to our clicks on the button
  });
  }
  </script>
</body>
</html>
/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #350048;
}
.buttons .button{
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 12px 38px;
  background: linear-gradient(90deg, #6616d0, #ac34e7);
  border-radius: 45px;
  margin: 10px;
  font-size: 30px;
  font-weight: 400;
  text-decoration: none;
  box-shadow: 3px 5px rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0,0,0,0.1);
  overflow: hidden;
}
.buttons .button.two{
  background: linear-gradient(90deg, #025ce3, #4e94fd);
}
.buttons .button .overlay{
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  animation: blink 0.5s linear;
}
@keyframes blink {
  0%{
    height: 0px;
    width: 0px;
    opacity: 0.3;
  }
  100%{
    height: 400px;
    width: 400px;
    opacity: 0;
  }
}

If you face any difficulties while creating your Button Ripple Animation or your code is not working as expected, you can download the source code files for this Button Click Animation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Previous articleFile Upload with Progress Bar HTML CSS & JavaScript
Next articleNavigation Menu Hover Animation in HTML and CSS

5 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here