Animation Button Click Effect in HTML CSS & JavaScript

The animation button click effect is a popular de sign technique used in website and application design to create an interactive and engaging user experience. It involves adding an animation or transition effect to buttons when they are clicked by the user.

In this article, we will learn how to create a simple animation button click effect using HTML, CSS, and JavaScript. This effect will add a fun and interactive element to your website and engage your users.

Simple Steps for Creating a Animation Button in HTML CSS & JavaScript

Create a Folder: Start by creating a folder for your project. You can name it anything you like. Inside this folder, you’ll need to create the following files:

index.html (for the structure of your animation Button)
style.css (for styling the animation Button)
script.js (for adding functionality with JavaScript)

Create the HTML File:

Name your HTML file index.html.

Create the CSS File:

Name your CSS file style.css.

Create the JavaScript File:

Name your JavaScript file script.js.

Step 1: Create the HTML structure

The first step is to create the basic HTML structure for the button. This will include a div or a button element with a class or ID that can be targeted in the CSS and JavaScript.

				
					<!DOCTYPE html>
<!-- NotArena || www.NotArena.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>Animation Button Click</title>
    <link rel="stylesheet" href="style.css" />
  <style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-3204cc1c-ffec-4d1d-ae21-161e102a1c76: url('https://notarena.com/wp-content/plugins/ultimate-post/assets/img/loading.gif');}.elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-904a2669-cbd6-4a2a-9920-2736234a7416: url('https://i0.wp.com/notarena.com/wp-content/uploads/2024/10/BG.png?fit=1200%2C726&ssl=1');}.rll-youtube-player .play{--wpr-bg-cb1d3a76-9f2e-4c4b-be33-3afadefe2c1d: url('https://notarena.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".ultp-block-wrapper .slick-loading .slick-list","style":".ultp-block-wrapper .slick-loading .slick-list{--wpr-bg-3204cc1c-ffec-4d1d-ae21-161e102a1c76: url('https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif');}","hash":"3204cc1c-ffec-4d1d-ae21-161e102a1c76","url":"https:\/\/notarena.com\/wp-content\/plugins\/ultimate-post\/assets\/img\/loading.gif"},{"selector":".elementor-1911 .elementor-element.elementor-element-2e43d051, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":".elementor-1911 .elementor-element.elementor-element-2e43d051::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-video-container::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1911 .elementor-element.elementor-element-2e43d051 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--wpr-bg-904a2669-cbd6-4a2a-9920-2736234a7416: url('https:\/\/i0.wp.com\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png?fit=1200%2C726&ssl=1');}","hash":"904a2669-cbd6-4a2a-9920-2736234a7416","url":"https:\/\/i0.wp.com\/notarena.com\/wp-content\/uploads\/2024\/10\/BG.png?fit=1200%2C726&ssl=1"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-cb1d3a76-9f2e-4c4b-be33-3afadefe2c1d: url('https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"cb1d3a76-9f2e-4c4b-be33-3afadefe2c1d","url":"https:\/\/notarena.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
  
  <body>
    <button class="button">Click Button </button>
  <script>var rocket_beacon_data = {"ajax_url":"https:\/\/notarena.com\/wp-admin\/admin-ajax.php","nonce":"f787b24636","url":"https:\/\/notarena.com\/code-library\/animation-button-click-effect-in-html-css-javascript","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='http://notarena.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
</html>

< div class=”button“>Click Me!</ div>

Step 2: Style the button

Next, we will use CSS to style our button. We can use any design or style for our button, but for this tutorial, we will create a simple button with a background colour, border, and some padding.

				
					    /* 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: 50px;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: #e82abf;
  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, #e82abf 30%, transparent 20%),
    radial-gradient(circle, transparent 20%, #e82abf 20%, transparent 30%),
    radial-gradient(circle, #e82abf 30%, transparent 10%),
    radial-gradient(circle, #e82abf 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #e82abf 15%, transparent 20%),
    radial-gradient(circle, #e82abf 20%, transparent 20%),
    radial-gradient(circle, #e82abf 30%, transparent 20%),
    radial-gradient(circle, #e82abf 20%, transparent 20%),
    radial-gradient(circle, #e82abf 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.8s 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%;
  }
  60% {
    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, #e82abf 20%, transparent 20%),
    radial-gradient(circle, #e82abf 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #e82abf 15%, transparent 20%),
    radial-gradient(circle, #e82abf 20%, transparent 20%),
    radial-gradient(circle, #e82abf 20%, transparent 20%),
    radial-gradient(circle, #e82abf 20%, transparent 20%),
    radial-gradient(circle, #e82abf 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%;
  }
  60% {
    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%;
  }
}

To create an animation effect, we will use the CSS transition property. This property allows us to specify a transition effect for a specific CSS property, which will be applied when the property changes.

Step 5: Add the JavaScript function

Finally, we will use JavaScript to add the animation effect when the button is clicked. We will create a function that will toggle a CSS class on the button element, which will trigger the animation effect.

				
					const button = document.querySelector(".button");

button.addEventListener("click", (e) => {
  e.preventDefault;
  button.classList.add("animate");
  setTimeout(() => {
    button.classList.remove("animate");
  }, 600);
});

And that’s it! We have successfully created a button-click animation effect using HTML, CSS, and JavaScript. We can further customize the animation by experimenting with different CSS properties and values.

The button-click animation effect is a simple yet effective way to make your website or application more interactive and engaging for users. It can be applied to any type of button and can be customized to fit your design. We hope this step-by-step guide has helped you understand how to create this effect.