interactive jelly button in javascript

To create an interactive jelly button in JavaScript, we can use CSS keyframe animations and event listeners.

First, let's create a button element in HTML:


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

Next, we can add some CSS to style our button and create the animation:


#jelly-button {
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 20px;
  background-color: #0080ff;
  color: #ffffff;
  animation: jelly 0.6s ease-in-out;
}

@keyframes jelly {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}
380 chars
27 lines

This will create a button with a blue background that animates with a jelly effect when hovered over.

Finally, we can add an event listener to make the button interactive:


index.tsx
const jellyButton = document.getElementById('jelly-button');

jellyButton.addEventListener('click', function() {
  alert('You clicked me!');
});
145 chars
6 lines

Now when the user clicks the button, an alert will appear with the message "You clicked me!".

Putting it all together, we have:


<button id="jelly-button">Click me!</button>

<style>
  #jelly-button {
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 20px;
    background-color: #0080ff;
    color: #ffffff;
    animation: jelly 0.6s ease-in-out;
  }

  @keyframes jelly {
    0% {
      transform: scale(1);
    }
    25% {
      transform: scale(0.9);
    }
    50% {
      transform: scale(1.1);
    }
    75% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }
</style>

<script>
  const jellyButton = document.getElementById('jelly-button');

  jellyButton.addEventListener('click', function() {
    alert('You clicked me!');
  });
</script>
666 chars
39 lines

similar javascript code snippets

how to use useeffect in javascript

how to create a proxy variable in javascript

how to create fibonacci in javascript

how to parse a json string in javascript

how to use usestate in javascript

loop in javascript

create a loop in javascript

loop from 1 to 10 in javascript

create a react context in javascript

how to create a rest api in javascript

related categories