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>
  3. <head>
  4. <title>animation</title>
  5. <style>
  6. #box {
  7. background: #36C;
  8. width: 640px;
  9. height: 480px;
  10. }
  12. h1 {
  13. color: #FF0;
  14. padding-top: 180px;
  15. padding-left: 150px;
  16. }
  18. h3 {
  19. color: #009;
  20. padding-left: 150px;
  21. }
  23. #form {
  24. padding-left: 150px;
  25. }
  27. </style>
  28. <script type="text/javascript">
  29. function changeBG(el, clr) {
  30. var elem = document.getElementById(el);
  31. elem.style.transition = "background 2.0s";
  32. elem.style.background = clr;
  33. }
  34. </script>
  35. </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">
  45. <h1>Hello i am Sanjay Singh</h1>
  46. </div>
  47. </body>
  49. </html>
Output
When we click on the magenta button and here I also set this default color
Now if we click on the green button
Now if we click on the black button