How to render an unresponsive button via HTML (for illustration purposes) - html

Question

How do I render a normal (enabled-looking) button, via HTML/CSS, which doesn't change its appearance upon mouse over or mouse down (for illustration purposes e.g. Press [x] to cancel)?
(i.e. I don't want it to become "highlighted" or "pushed" when you hover the mouse over it or "press" it.)
I know I can use a picture of the button, but under different or future versions of browsers the subsequent real buttons may look different and not match the picture, which is why I'm looking to render it via HTML/CSS.

Answer 1

Maybe you can consider placing an empty <div> with a specified width and height overlapping the button, which will occlude the click on the button?
Depending the positioning modes of your outer elements, you can use the <div> to cover some outer element, or just the <input type="button" ...> itself (in which case JavaScript and DOM can be helpful to determine the actual size of the button and thus the coverage area).

Answer 2

#Navigeteur
just take a screenshot of a normal button and save it as bmp or png image
and render the image instead of button :)

Answer 3

The disabled attribute is supported in all major browsers, so you could use that.
<button type="button" disabled>Click Me!</button>
or, alternatively:
<input type="button" value="Click Me!" disabled />
To make it look like it's enabled, you could then edit its CSS properties for it's disabled state:
input[type="button"]:disabled, button[type="button"]:disabled {
background:#DDD;
color:#000;
}
But, as OP pointed out, this can make it appear completely different to what other buttons look like on certain browsers/systems. You could omit the background property in the CSS rule and they would render as any other disabled buttons, but with font color like enabled buttons. Alternatively, omit the disabled HTML attribute and position these buttons out of context they would normally belong to (being a part of a form).
EDIT: See Antony's answer for better explanation what styles need to be applied to make it appear like you expect them to ;)

Answer 4

You can force a disabled button to look just like a normal one using CSS.
DEMO
Safari: http://jsfiddle.net/9aXW9/2/
Firefox: http://jsfiddle.net/gZtT7/
IE buried its CSS in the registry. But as a general rule, apply color: #000; and other modifications would make it look like a normal button.
HTML
<input type="submit" disabled="disabled" value="I cannot be pressed." />
CSS
/* Safari */
input[type="submit"]:disabled {
-webkit-appearance: push-button;
-webkit-box-align: center;
text-align: center;
cursor: default;
color: ButtonText;
padding: 2px 6px 3px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
box-sizing: border-box;
white-space: pre;
}
/* Firefox */
input[type="submit"]:disabled {
-moz-appearance: button;
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: normal;
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-binding: none;
text-align: center;
text-shadow: none;
}