Post
Ask Question

Make animated background on click event using JavaScript

Here I am going to tell you how to make animation of color on click event using JavaScript. Using CSS and JavaScript in HTML we can make our page very attractive.

HTML CODE

  1. <html>  
  2. <head>  
  3. <title>animation</title>  
  4. <style>  
  5. #box  
  6. {  
  7.  background:#36C;  
  8.  width:640px;  
  9.  height:480px;   
  10. }  
  11. h1  
  12. {  
  13.  color:#FF0;  
  14.  padding-top:180px;  
  15.  padding-left:150px;  
  16. }  
  17. h3  
  18. {  
  19.  color:#009;  
  20.  padding-left:150px;  
  21. }  
  22. #form  
  23. {  
  24.  padding-left:150px;  
  25. }  
  26.   
  27. </style>  
  28. <script type="text/javascript">  
  29. function changeBG(el,clr)  
  30. {  
  31.  var elem=document.getElementById(el);  
  32.  elem.style.transition="background 2.0s";  
  33.  elem.style.background=clr;  
  34. }  
  35. </script>  
  36. </head>  
  37. <body>  
  38.  <h3>CLICK ON ANY BUTTON</h3>  
  39. <form id="form">  
  40.  input type="button" value="megenta" onClick="changeBG('box','#F0F')"/>  
  41.  <input type="button" value="green" onClick="changeBG('box','#0c0')"/>  
  42.  <input type="button" value="black" onClick="changeBG('box','#000')"/>  
  43. </form>  
  44.  <div id="box"><h1>Hello i am Sanjay Singh</h1></div>  
  45. </body>  
  46. </html> 

Output

When we click on magenta button and here I also set this default color



Now if we click on green button



Now if we click on black button
Next Recommended Reading Change The Background Color of a Button with JavaScript.