Take the 2-minute tour ×

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? (sorry for my bad English and thank you)

share|improve this question
add comment

3 Answers

the CSS selector for this state is called :active

So if you do:

input.btn:active { background:green }

that should work.

See demo

share|improve this answer
This only works with mouse down. –  xdazz Aug 17 '12 at 1:49
Doesn't seem to work in IE? –  Yuriy Galanter Aug 17 '12 at 1:56
@Trekstuff which IE? For elements other than a it is supported in IE only from 8.0 version: developer.mozilla.org/en-US/docs/CSS/:active . –  Piotr Jakubowski Aug 17 '12 at 2:02
@PiotrJakubowski in IE9 actually. Funny thing it looks like if I click on button outside of button text it works. But if I click on actual button text - it doesn't –  Yuriy Galanter Aug 17 '12 at 2:06
@PiotrJakubowski it works universally if I use button element instead of input element, e.g. <button type="button" class="btn">aaaa</button> instead of <input type="button" class="btn" value="aaaa" /> –  Yuriy Galanter Aug 17 '12 at 2:32
show 3 more comments

Plain vanilla HTML + JavaSctipt:

<input type="button" style="background-color:white" value="Click Me" onmousedown="this.style.background='green'" onmouseup="this.style.background='white'" />

Demo: http://jsfiddle.net/bqjzq/

share|improve this answer
Why would you do javascript, esp. inline javascript for something like this if you can do it with CSS? –  Moin Zaman Aug 17 '12 at 2:36
See my comments to Piotr solution below. Pure CSS for input button does not work in IE. And inline JS is just for the example, of course if a more complex function is needed it should be a function. Anyway pure CSS workd for <button> element, so if author is not bound to <input> element - JS solution is not needed. (Of course if support for browsers below IE8 is needed - JS is the only solution) –  Yuriy Galanter Aug 17 '12 at 2:43
add comment

For me it only works with:

input:active{  background-color:green}

Another option is to specify on mouse over, for buttons only:

input[type=button]:hover{  background-color: #46000D}
share|improve this answer
add comment

Your Answer


