Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Input type button changes color while pressed?

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?

like image 727
Gianclè Monna Avatar asked Aug 17 '12 01:08

Gianclè Monna


People also ask

How can I change button color when pressed?

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.

How do you change the color of a button when the input field is filled Javascript?

[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 } });

Can you change button color CSS?

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.


1 Answers

the CSS selector for this state is called :active

So if you do:

input.btn:active { background:green }

that should work.

See demo

like image 189
Moin Zaman Avatar answered Oct 24 '22 14:10

Moin Zaman