interactive jelly button that jiggles when you click it in javascript

To create an interactive jelly button that jiggles when clicked, we can use HTML, CSS, and JavaScript.

HTML:


<button id="jelly-button">Click Me!</button>
45 chars
2 lines

CSS:


#jelly-button {
  background-color: #ffcc99;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 24px;
  font-weight: bold;
  padding: 20px 40px;
  box-shadow: 0 10px 20px rgba(255, 204, 153, 0.3);
  transition: box-shadow 0.3s ease-in-out;
  animation: jelly 0.5s ease-in-out infinite;
  animation-play-state: paused;
}

@keyframes jelly {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
471 chars
26 lines

JavaScript:


const button = document.getElementById("jelly-button");

button.addEventListener("click", () => {
  button.style.animationPlayState = "running";
  setTimeout(() => {
    button.style.animationPlayState = "paused";
  }, 500);
});
229 chars
9 lines

In the CSS code above, we use the animation property to create a jelly effect on the button, while also applying some basic styling. In the JavaScript code, we add an event listener to the button that starts and pauses the animation when it is clicked.

With these three languages working together, we can create an interactive jelly button that jiggles delightfully when clicked.

similar javascript code snippets

square pulse animation in javascript

when mouse in element animate from mouse position onward in javascript

bouncing dvd standby animation in javascript

make a favicon animation in javascript

create the animation of many dom elements which are launched from the bottom to top and fall in parabolic motion in javascript

create the animation of many dom elements which are launched from the bottom to top and fall in parabolic motion with the gsap library in javascript

create a button in javascript

how to parse a json string in javascript

loop in javascript

how to use useeffect in javascript

related categories