I want my input type=button to change color only while pressed. For example, if I have a white button, I want it to become green only while pressed, and when it's no more pressed I wish it returns white. How can I do this in HTML and Javascript?
To change a button's color every time it's clicked:Add a click event listener to the button. Each time the button is clicked, set its style. backgroundColor property to a new value. Use an index variable to track the current and next colors.
[1]: Change the button's color after fill out the formchange(function() { var filled = true; $( "input[type=text]" ). each(function( index ) { if($( this ). val() == ""){ filled = false; }); if(filled === false){ //change color } });
To change the background color of the button, use the CSS background-color property and give it a value of a color of your taste. In the . button selector, you use background-color:#0a0a23; to change the background color of the button.
the CSS selector for this state is called :active
So if you do:
input.btn:active { background:green }
that should work.
See demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With