CSS has a cool selector called “:active“, it can be used for example to select a button when it is pressed. Let’s say you have an HTML markup like this:

<input type="button" class="mybutton" value="Click me" />

and you define CSS selector like this:

.mybutton:active {background-color:red}

the button will change its background color to red when clicked and only for the duration of the click (while the mouse button is down) as soon as mouse button is released – background color is reverted to original.

This works fine in all modern browsers and supposed to work in Internet Explorer since version 8. And it works – well kind of – only you click the button but not the button label (text of the button). If you click actual text – style does not change.

Weird, but with IE weird is often normal. To alleviate the problem use button HTML element instead of input:

<button type="button" class="mybutton">Click me"</button>

With this markup CSS described above works universally.

Of course if you need to target browser below IE8, CSS selector approach does not work, you have to resort to JavaScript:

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