Creating a button-click animation in HTML, CSS, and JavaScript can be a challenging but rewarding learning project. This project is a great opportunity to hone your skills in animations and make something that you can share with others.
A button-click animation is a type of animation that is activated when a button is clicked by a user. These animations can take various forms, such as changing the button’s color, and size, or creating a ripple effect. Button-click animations add a layer of interactivity and engagement to websites and web applications.
In this blog, you will learn to create a button-click animation using HTML, CSS, and JavaScript! By the end of this tutorial, you will have a button that animates when clicked, producing small bubbles as shown in the image. Recently I created a Chrome Extension I hope that project will also be helpful for you.
Video Tutorial of Button Click Animation
Steps to Create a Button Click Animation
- File Structure of the Project
- Creating Button Click Animation
1. File Structure of the Project
To build this button-click animation, we’ll be using two separate files – index.html and style.css. These files will contain the HTML, CSS, and JavaScript code respectively needed to bring the button click animation. Let’s get started by setting up these files and adding the basic code.
Once you have made these files, you can proceed to the next step of creating your Button Click Animation.
2. Creating Button Click Animation
In the second step, we will design the user interface for our button and style it using HTML and CSS. Once the user interface is complete, we will use JavaScript to create make animate on button click.
In the index.html file, add the following HTML and JavaScript code to create the basic structure of the animated button
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button Click Animation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button class="button">Click Me</button>
<script>
const button = document.querySelector(".button");
button.addEventListener("click", (e) => {
e.preventDefault;
button.classList.add("animate");
setTimeout(() => {
button.classList.remove("animate");
}, 600);
});
</script>
</body>
</html>
In the style.css file, add the following CSS code to add styles and make the button and its bubbles. If you want, you can change the color, background, font, and size of the button in this code.
/* Import Google font - Poppins */
@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 {
display: flex;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0faff;
}
.button {
position: relative;
padding: 10px 22px;
border-radius: 6px;
border: none;
color: #fff;
cursor: pointer;
background-color: #7d2ae8;
transition: all 0.2s ease;
}
.button:active {
transform: scale(0.96);
}
.button:before,
.button:after {
position: absolute;
content: "";
width: 150%;
left: 50%;
height: 100%;
transform: translateX(-50%);
z-index: -1000;
background-repeat: no-repeat;
}
.button.animate::before {
top: -70%;
background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, transparent 20%, #7d2ae8 20%, transparent 30%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%);
background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
10% 10%, 18% 18%;
animation: greentopBubbles ease-in-out 0.6s forwards infinite;
}
@keyframes greentopBubbles {
0% {
background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
40% 90%, 55% 90%, 70% 90%;
}
50% {
background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
50% 50%, 65% 20%, 90% 30%;
}
100% {
background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
50% 40%, 65% 10%, 90% 20%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
.button.animate::after {
bottom: -70%;
background-image: radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, transparent 10%, #7d2ae8 15%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%),
radial-gradient(circle, #7d2ae8 20%, transparent 20%);
background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
animation: greenbottomBubbles ease-in-out 0.6s forwards infinite;
}
@keyframes greenbottomBubbles {
0% {
background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
70% -10%, 70% 0%;
}
50% {
background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
105% 0%;
}
100% {
background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
110% 10%;
background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
}
}
Conclusions and Final Words
If you found this blog helpful, please consider sharing it with others. Your support helps us continue creating valuable content and resources for the development community. Thank you for your support!
