Changing form button style without losing 3d effect - html

Question

In Firefox and Internet Explorer, disabled buttons look greyed out and unclickable. But Chrome renders them just the same as enabled buttons.
How can I change the style of a button (for example its color) without losing the 3d effect, in order to make it look disabled?
I am not asking how to make my own CSS button that looks the same in all browsers. I want to use the browser default buttons, but add an additional style to disabled buttons for those browsers that do not have a different style for them.
So far, everything I tried, like for example changing the background color or background image, made the button lose the 3d effect. The result looks like this, which is not what I want:
This is the result in Firefox, but it looks similar in the other browsers. The button looks much different from the default one.

Answer 1

You could add some transparency to the disabled buttons.
button {
padding: 10px;
}
button:disabled {
opacity: 0.6;
}
<button>button</button>
<button disabled>button disabled</button>

Answer 2

You can do this using background gradients
https://jsfiddle.net/ammfoh3j/
There is a really useful site you can use to generate whatever kind of 3D looking effect you would like
http://www.colorzilla.com/gradient-editor/
<style>
button {
margin:0px; padding:0px;
background: #e4f5fc;
background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);
}
</style>
<button>anything</button>
More accurate/pretty http://jsfiddle.net/j3Lgs3x5/2/