更改表单按钮样式而不会丢失3d效果

Question

在Firefox和Internet Explorer中，禁用的按钮显示为灰色且无法点击。但Chrome会将其渲染为启用按钮。

如何更改按钮的样式（例如其颜色）而不会丢失3d效果，以使其看起来已禁用？

我不是问如何在所有浏览器中创建自己的CSS按钮。我想使用浏览器默认按钮，但为那些没有不同风格的浏览器为禁用按钮添加其他样式。

到目前为止，我尝试的所有内容，例如更改背景颜色或背景图像，都使按钮失去了3d效果。结果看起来像这样，这不是我想要的：

这是Firefox的结果，但在其他浏览器中看起来很相似。该按钮与默认按钮看起来大不相同。

Answer 1

您可以为禁用的按钮添加一些透明度。

＆＃13;

＆＃13;

button {
  padding: 10px;
}
button:disabled {
  opacity: 0.6;
}

＆＃13;

<button>button</button>
<button disabled>button disabled</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用背景渐变

来完成此操作

https://jsfiddle.net/ammfoh3j/

您可以使用一个非常有用的网站来生成您想要的任何3D效果

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>

更准确/更漂亮http://jsfiddle.net/j3Lgs3x5/2/