Looking for a way to add a touch of interactivity and excitement to your website? A mouse click effect with animation is a great way to do just that. In this step-by-step guide, we'll show you how to create a stunning mouse click animation effect using HTML, CSS, and JavaScript.
You may have seen click effects especially in screen recorded video tutorials, websites which have buttons with ripple effects etc…
Mouse Click Effect with Animation Using HTML, CSS, & JavaScript: A Step-by-Step Guide to Creating a Stunning Effect That Will Make Your Website More Interactive and Engaging.
What you'll need:
- A basic understanding of HTML, CSS, and JavaScript
- A code editor
- A web browser
You’ll learn in this tutorial:
- How to make wave effect using JavaScript?
- How to make click effects on mouse click?
- How to make ripple effects?
- How to find x and y coordinate of cursor?
- How to create new element and append it in body?
- How our mouse click effects looks like?
When user click anywhere on document or website, a wave like structure arises from mouse clicked point and expands smoothly and after few milliseconds it disappears or removed. You can see demo in below YouTube video.
Video Tutorial on Mouse Click Effect with Animation.
Add Effect on Mouse Click.
How we going to show click effect when user click on website or document?
So, when user click on document, we going to create and append new element (span tag) in document body. With styling of top and left position of cursor in document. And also add on class to that span tag for styling and animation.
Animation is added with keyframes in CSS.
Now after creating, adding class, applying styling and appending in document body, we also have to remove that span tag to show that click is happened or clicked so for that we going to add settimeout method of JavaScript and remove that span tag.
Means when user click on document span tag is created and append with styling and class and after few milliseconds it disappears or removed. You can see above video tutorial for more details.
So, let’s start making this click effects on mouse click step by step.
First of all, create new folder and open it in your code editor. Now inside that folder create two files with html and CSS extension. I have also used JavaScript which I have added inside html file in script tag. And also add basic structure of html.
Step 1: Create new element (to show click effect) on click.
So first of all, we going to create new element (which is span tag, that is for visibility of click effect), and add class inside it (which is click_effect) on click.
CSS
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
background-color: #f2f2f2;
}
.click_effect{
position: absolute;
width: 80px;
height: 80px;
border: 5px solid #e91e63;
pointer-events: none;
margin-top: -45px;
margin-left: -45px;
opacity: 0;
border-radius: 50%;
}
JavaScript
document.onclick = function(){
let span = document.createElement("span");
span.classList.add("click_effect");
}
You can also use mouse down event instead of click event.
Step 2: Add position (newly created element) to show at the cursor clicked position.
Now after creating new element, we have to add that new element in document body, where the cursor or mouse clicked, so for that we going to make its left and top position according to cursor X and Y coordinates. You find x and y coordinates of cursor by event.pageX and event.pageY. See below code.
JavaScript
document.onclick = function(e){
let x = e.pageX;
let y = e.pageY;
let span = document.createElement("span");
span.classList.add("click_effect");
span.style.top = y + "px";
span.style.left = x + "px";
}
Step 3: Append the click effect (newly created element) to document or webpage.
After creating new element, adding class(click_effect) to it, and setting it left and top position to cursor clicked coordinates. We have to append it inside document body. So, for that we going to use appendChild() method.
JavaScript
document.onclick = function(e){
let x = e.pageX;
let y = e.pageY;
let span = document.createElement("span");
span.classList.add("click_effect");
span.style.top = y + "px";
span.style.left = x + "px";
document.body.appendChild(span);
}
Step 4: Remove click effect (newly created element) after few milliseconds of appends.
After appending we also have to remove it after few milliseconds because we don’t want to show it for longer time, so for that, after appending in document body, we going to remove that newly created element (span tag) after few milliseconds with the help of settimeout method.
JavaScript
document.onclick = function(e){
let x = e.pageX;
let y = e.pageY;
let span = document.createElement("span");
span.classList.add("click_effect");
span.style.top = y + "px";
span.style.left = x + "px";
document.body.appendChild(span);
setTimeout(() => {
span.remove();
}, 600);
}
Step 5: Adding animation to click effect (newly created element).
Now its time to animate the click effect (newly created element span tag) so we going to make it with the help of CSS keyframes.
We going to add animation to click_effect class which is added inside span tag.
CSS
.click_effect{
position: absolute;
width: 80px;
height: 80px;
border: 5px solid #e91e63;
pointer-events: none;
margin-top: -45px;
margin-left: -45px;
opacity: 0;
border-radius: 50%;
animation-name: click_animation;
animation-duration: 0.6s;
animation-timing-function: linear;
}
@keyframes click_animation {
/* You can do it in two ways */
/* First */
/* from{
opacity: 1;
transform: scale(0);
}
to{
opacity: 0;
transform: scale(1);
} */
/* Second */
0%{
opacity: 1;
transform: scale(0.1);
}
10%{
opacity: 1;
transform: scale(0.2);
}
20%{
opacity: 1;
transform: scale(0.3);
}
30%{
opacity: 1;
transform: scale(0.4);
}
40%{
opacity: 0.9;
transform: scale(0.5);
}
50%{
opacity: 0.7;
transform: scale(0.6);
}
60%{
opacity: 0.5;
transform: scale(0.7);
}
70%{
opacity: 0.3;
transform: scale(0.8);
}
80%{
opacity: 0.1;
transform: scale(0.9);
}
90%{
opacity: 0;
transform: scale(1);
}
100%{
opacity: 0;
transform: scale(1);
}
}
So that’s it, you have successfully make a simple mouse click effect using HTML CSS and JavaScript. You can see demo in above YouTube video.
So that’s how you can make click effect or ripple effect to see mouse click. You can see demo in above YouTube video. If you have any query or suggestion you can ask in comment section.
You may like:
- How to create colourfull mouse cursor tail using JavaScript.
- How to create a mouse click ballon effect using JavaScript.
Share your thoughts.