How to make Animated Click Effect using HTML CSS and JavaScript ?

Last Updated : 26 Oct, 2023

In this article, we will see how to make an Animated Click Effect using HTML CSS, and JavaScript. We generally see animations on modern websites that are smooth and give users a good experience.

Here, we will see when the user clicks on the button only then some animation would appear. The animation works after the button is clicked this is used in websites to confirm the user activity is done.

Prerequisites

Approach

Create the card structure using HTML tags, like <div>, <h1> for heading, <p> to display the word with corresponding classes and id’s.
Add different styling properties in the CSS file using classes and elements that will define margin, padding, height, and border to the specific elements.
Give animation to the Heading when the page gets loaded.
Make function animateonce, and in the body of that function call setTimeout() which manipulates DOM when the user clicks a button and performs animation on the button.
Then, get the particular button element using getElementById and then add eventlistener after that call the function animateonce.

Example: This example will let you understand how we can make CLICK ANIMATION EFFECT using HTML, CSS, and JavaScript

HTML

<!-- Filename - index.html -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width,  
            initial-scale=1.0"> 
    <title>CLICK ANIMATION EFFECT</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="container"> 
  
        <div class="card"> 
            <div class="content"> 
                <h1 class="heading-name"> 
                    GeeksforGeeks 
                </h1> 
                <p id="pid"> 
                    Click the button below to see 
                    the Animation Effect 
                </p> 
                <div id="btn-parent"> 
                    <button class="btn" id="btn_id2"> 
                        Click Me 
                    </button> 
                </div> 
            </div> 
        </div> 
  
    </div> 
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* Filename - style.css */
/* Google fonts */
@import url( 
'https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 
  
body { 
    font-family: 'Poppins', sans-serif; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    background-color: rgb(212, 228, 228); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 729px; 
} 
  
/* Style for the card and border  */
.card { 
  
    height: 280px; 
    width: 541px; 
    padding: 20px; 
    background-color: #8EC5FC; 
    background-image: 
        linear-gradient(50deg, #accceb 0%, #c4a6e0 100%); 
    box-shadow: rgba(25, 24, 27, 0.75) 0px 15px 20px; 
    border-radius: 10px; 
} 
  
#btn-parent { 
    display: flex; 
    gap: 10px; 
} 
  
/* Style for the button  */
.btn { 
    padding: 10px; 
    height: 40px; 
    width: 100px; 
    border-radius: 50px; 
    font-size: 15px; 
    background-color: rgb(106, 130, 211); 
    color: antiquewhite; 
} 
  
/* Style for the heading paragraph and button */
.content { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
    align-items: center; 
    padding: 12px; 
    margin: 8px; 
    box-sizing: border-box; 
} 
  
.heading-name { 
    color: rgb(10, 83, 10); 
    animation: namegfg 2s ease-in-out both; 
} 
  
#pid { 
    font-weight: 600; 
    line-height: 50px; 
    color: #0f4983; 
} 
  
/* For Animation */
.animationjs { 
    animation: ani 2s ease-in-out both; 
} 
  
@keyframes ani { 
    0% { 
        transform: scale(1); 
        opacity: 0; 
    } 
  
    25% { 
        transform: scale(0.8); 
        opacity: 0.25; 
    } 
  
    50% { 
        transform: scale(1.2); 
        opacity: 1.50; 
    } 
  
    75% { 
        transform: scale(1.3); 
        opacity: 0; 
    } 
  
    100% { 
        transform: scale(1); 
        opacity: 1; 
    } 
} 
  
@keyframes namegfg { 
    0% { 
        transform: scale(1); 
    } 
  
    25% { 
        transform: scale(0.8); 
    } 
  
    50% { 
        transform: scale(1.2); 
    } 
  
    75% { 
        transform: scale(1.5); 
    } 
  
    100% { 
        transform: scale(1); 
    } 
} 
  
/* Media queries */
  
@media only screen and (max-width: 582px) { 
    .card { 
        height: 340px; 
        width: 250px; 
        padding: 20px; 
        background-color: #8EC5FC; 
        background-image: 
            linear-gradient(50deg, #accceb 0%, #c4a6e0 100%); 
        box-shadow: rgba(25, 24, 27, 0.75) 0px 15px 20px; 
        border-radius: 10px; 
    } 
}

Javascript

// Filename - scripts.js (JavaScript code) 
let button = document.getElementById("btn_id2"); 
  
button.addEventListener("click", animateonce); 
  
function animateonce() { 
    button.classList.add("animationjs"); 
  
    setTimeout(() => { 
        button.style.backgroundColor = "#A155B9"; 
        button.classList.remove("animationjs"); 
    }, 1500); 
}