Button Ripple Effect using HTML, CSS & JavaScript

Button Ripple Effect using HTML, CSS & JavaScript

Button Ripple Effect using HTML, CSS & JavaScript

In this article, you will learn how to create Button Ripple Effect using HTML, CSS, and JavaScript. I have shared many more button animations with you before. This is the first time I will create a Ripple Effect in a button.

Button Ripple Effect CSS is basically a kind of onclick effect i.e. when you click on the button this Button Ripple Effect JavaScript can be seen. 

If you don’t know what Ripple Effect is, let me tell you, it is a kind of simple effect. When you click on something, a colorful circle will be created in that place. These colorful circles can be matched in size.

Button Ripple Effect CSS

Below I have given a demo that will help you to understand how this circular ripple effect works. Here you will find the required source code and live preview.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

Although I have shared tutorials on creating many more types of buttons before, the most notable of which are neon buttons, gradient buttons, glowing buttons, etc. 

Html, CSS, and javascript have been used to create this button ripple effect. The button’s structure was first created using HTML. Then it was designed by CSS. After all, the ripple effect has been implemented by JavaScript.

You need JavaScript enabled to view it to create this button ripple animation. JavaScript will basically help you determine the position of your causer and create those colorful circles in the place where you click.

How to Create Button Ripple Effect CSS

If you want to create this Button Ripple Effect you can follow the step-by-step tutorial below. If you know basic HTML, CSS, and javascript then you can create it. 

If you only want the source code, you can use the download button or code section at the bottom of the article.

Step 1: The basic structure of the button

First, the basic structure of the button was created using some HTML code.

<div class=”content-wrapper”>
   <div class=”button-ripple-effect”>Click me</div>
</div>

The webpage is designed with the following CSS. I have used black as the background color of the webpage here.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1c1d22;
}
The basic structure of the button

Now the button has been designed. The size of this button depends on the padding and linear-gradient color is added to the background.

.content-wrapper .button-ripple-effect {
position: relative;
padding: 20px 50px;
border: 0;
border-radius: 60px;
background: linear-gradient(90deg, #f18c2c, #df694f);
color: #ffffff;
font-family: “Raleway”, sans-serif;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1.4px;
cursor: pointer;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
button has been designed

Step 2: Add Ripple Effect to the button

Now I have added Ripple Effect in the button. This means that what kind of effect can be seen when you click on the button is added here. White color has been used in this effect. 

Although you can change the color to your liking if you want. One-second animation has been used with it. This means that the circle will be visible after one second of your click.

.content-wrapper .button-ripple-effect span {
position: absolute;
background: #ffffff;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: ripple 1s linear;
}
@keyframes ripple {
0% {
  width: 0;
  height: 0;
  opacity: 0.3;
}
100% {
  width: 150px;
  height: 150px;
  opacity: 0;
}
}
.content-wrapper .button-ripple-effect:focus {
outline: none;
}
Add Ripple Effect to the button

Step 3: Activate the Button Ripple Effect

Although the above design has been completed, it has not been implemented. You must use JavaScript to make it work. Below I have put all the JavaScript together and put together the necessary expressions with each line.

//A global constant of buttons has been determined
let buttons = document.querySelectorAll(‘.button-ripple-effect’);
// Attaching click event listener
buttons.forEach((button) => {
  console.log(‘attaching listener’);
  button.addEventListener(‘click’, function(e) {
    console.log(‘btn clicked’);
//stopPropagation() method of the Event interface prevents further propagation
    e.stopPropagation()
//clientX property returns the horizontal coordinate of the mouse pointer
    console.log(e.clientX, e.clientY);
    console.log(e.target)
    let x = e.clientX – e.target.offsetLeft;
    let y = e.clientY – e.target.offsetTop;
   // Creating the ripple element
    let ripple = document.createElement(‘span’);
    ripple.style.left = x + ‘px’;
    ripple.style.top = y + ‘px’;
    this.appendChild(ripple);
    // Removing the ripple element
//setTimeout() method sets a timer which executes a function
    setTimeout(() => {
        ripple.remove();
    }, 1000);
  });
});
Activate the Button Ripple Effect

Javascript button ripple effect (Source Code)

 For those who only want to get the source code, I have given the following code section. In this area, you will find all the necessary source code to create this Button Ripple Effect. 

Here I have put all the code together. If you can’t add the above code then no need to worry. Copy the codes below and paste them into any of your HTML files. 

Since all the code is given here together, you do not need to create JavaScript and CSS files separately.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

You can use the download button below for extra convenience. Please comment on how you like this Button Ripple Effect CSS. I have shown many more types of button animations before. 

If you have difficulty understanding the javascript button ripple effect tutorial above, you can let me know by commenting on Instagram.