Site icon Css3 Transition

Change Background Color On button Click using Javascript

Change Background Color On button Click using Javascript

Today I am going to share with you a basic jquery scripting to change the background color of anybody or element which you want with a smooth css3 transition animation to change background color smoothly.

Here in this scenario I am changing body background color using two button “click to change background color” and second “click to toggle background color”.

For First button : background color will change one color to another color can not set back background to color to previous without refreshing page.

Java script code to change color :

For Second Button: background color will change one color to another color and you can set it background to last color by clicking again on same button. This is know as background color toggle animation.
Here I am toggling a class on button click. Frist click to add class and second click to remove. You can repeat this process again n again.

Javascript :-

Html presentation for this effect

HTML :-

Style for smooth background color change animation using css3 transition, yes here I am using css3 transition property to make background color change smooth.

Css :-

Exit mobile version