Assembling a button-click animation using HTML, CSS, and JavaScript can be both challenging and rewarding – it provides the perfect opportunity to broaden your skills in animation while producing something to share with others.
Button-click animation can be defined as any form of animation activated when someone presses a button on a web page or web app, typically as soon as the individual has pressed that button. These animations may take many forms, such as changing color or size or creating rippled effects, giving additional engagement to websites or applications online.
In this tutorial on this blog, you will learn how to make a button-click animation using HTML, CSS, and JavaScript! After this course, you will have created a button that animates when clicked, producing tiny bubbles, as seen in the picture. Recently, I developed a Chrome Extension, so this project can prove beneficial.
Steps for Creating an Animation Button: Click Animation
Let us show you how to create the Button Click Animation using HTML, CSS, and JavaScript in just two steps:
- File Outline of Project Structure and Contents
- Design of Button Click Animations
1. Project File Outline and Contents of Project
To create this animation, two files will be required—index. html and style. CSS contains all the HTML, CSS, and JavaScript codes necessary to build button animation. Let’s create these two files before beginning to add code to them.
Once your files are complete, the next step in creating your Button Click Animation is taking shape.
2. Design of Button Click Animations
At this stage, we’ll design the user interface of our button using HTML and CSS. Once completed, JavaScript can be utilized to animate it when clicked upon.
You can add HTML and JavaScript code to the index.html file to create the framework of an animated button.
<!DOCTYPE html>
<!-- Coding By abhikesh- abhikesh.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>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>
Within your style.css file, you can include this CSS code to add styles and create buttons and bubbles. If you would like to change their background color, size, font style, etc., simply modify this code accordingly!
/* 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%;
}
}
Conclusion and Final Words
By following these steps, you have successfully created the button-click animation. Various animations are available here on this site to help you further hone your animation skills.
If this blog has benefited you, please share it with others. Your assistance helps us continue creating valuable tools and content for the developer community—we appreciate it greatly! Thank you so much for giving back!
