html submit button doesn't visibly sink when pressed if border is set

Question

I've designed beautiful html form buttons (for input type="submit"). But I realize that they no longer sink when pressed. Normally, it's not a problem because pressing the button immediately takes you to the next page. And on Firefox it's a little visible because a dotted outline appears around the text of the button. But a user tried to upload a big image on safari and it wasn't at all clear that the button had been pressed or the image was being uploaded.

So what's the best way to have a stylized submit with a nice border that makes it very clear when being pressed? I could use javascript to detect pressing and unpressing and change the class accordingly, but I guess I'm hoping there's an easier standard way to do this? If not, is there a good jQuery library to deal with this?

Here's what I'm talking about: http://jsfiddle.net/gctJq/

Just found the jQuery UI button widget! Guess this is what I was looking for if there wasn't an easy standard html solution. I already use jQuery UI for other elements, wondering how difficult it will be to customize this to get buttons in all sizes and colors.. it seems to be more suited to 1 standard size and color.

Answer 1

you use the :active selector

see it in action here

http://jsfiddle.net/gctJq/1/

worth noting is that it will work in all modern browser's expect ... drum sound... ie! well it kind of works in ie 8 but then you're not allowed to have any text typed instead you would use a background image to type your text to make sure it looks the same for all the browsers, what i would do in your case is disabling the submit button on submit making it quite clear for the use that the data has been send and is being processed. something like this will also indicate that it's actually is.

<input type="submit" onclick="this.disabled=true;this.value='loading...'" />

Answer 2

When you specify a border, it removes the browser's default styling somewhat.

You would need to manually specify how the button should look when pressed.

Also be aware that IE adds a 1px border to the submit button when any element on the form is focused. The only way (I know of) to get rid of it is to apply border: none; to the button and mimic the border in another manner.