Windows操作系统按钮样式CSS

有人能猜出我应该对按钮应用什么CSS样式来猜出这个确切的外观吗

---

注意：我意识到这是Windows上未设置样式的按钮的默认外观，并且我不必应用任何CSS来获得这种样式，但在Mac和Linux上它是不同的，因此我不能依赖操作系统的默认样式。我必须在css中强制使用这种样式。有人知道什么样的CSS样式可以始终如一地产生这种效果吗？

这里有一个很好的教程，介绍如何获得您想要的效果：

很难将一个按钮的样式设置为完全相同的样式，并且是可用的可伸缩格式

---

另一种方法是模拟HTML按钮，将其作为带有背景图像的div，并编写一些Javascript来模拟功能

使用一组图像作为按钮背景。一组，而不是单个图像，因此您可以在站点中使用不同宽度的按钮。

可能的变体-图像，如下所示：

$('.example').scale9Grid({top:10,bottom:10,left:10,right:10});

例子 Firefox 3.6.12

Safari 5.0.3

Chrome 8

Internet Explorer 8

出于某种原因，IE8的property

filter

属性不起作用（它应该起作用）

HTML

---

.

好的，因为我看不到你的图像，所以我只是在我的操作系统（Windows 7）上按了一个默认按钮。样式如下（只考虑Firefox，因为我懒得做跨浏览器版本）：

这是一个仅使用CSS3的CSS版本。它在Internet Explorer中不起作用，Opera不会渲染背景渐变。因此，最好使用图像而不是纯CSS

[编辑]

一个更完整的实现：（请随意添加IE过滤器和Opera的某种回退，并编辑我的答案以发布它-粗体：）

a按钮{
高度：18px；
填充：2px8px；
边框：1px实心#F3；
-莫兹盒阴影：0 1px#707070；
-网络工具包盒阴影：0 1px#707070；
盒影：0 1px#707070；
-moz边界半径：3px；
-webkit边界半径：3px；
边界半径：3px；
背景：-moz线性梯度（顶部，#F2F20%，#Ebeb 50%，#DDDD 51%，#CFCFCF 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#f2f2）、颜色停止（0.5，#ebebebeb）、颜色停止（0.51，#ddddddd）、颜色停止（1，#CFCFCF））；
背景：线性梯度（顶部，#F2F20%，#EBEBEB 50%，#DDDD 51%，#CFCFCF 100%）；
字体：普通12px无衬线；
颜色：黑色；
文字装饰：无；
}
a、 按钮：悬停{
边框：1px实心#ECF7FD；
-莫兹盒阴影：0 1px#3C7FB1；
-网络工具包盒阴影：0 1px#3C7FB1；
盒影：0 1px#3C7FB1；
背景：-莫兹线性梯度（顶部，#EAF6FD 0%，#D9F0FC 50%，#BEE6FD 51%，#A7D9F5 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#EAF6FD）、颜色停止（0.5，#D9F0FC）、颜色停止（0.51，#BEE6FD）、颜色停止（1，#A7D9F5））；
背景：线性梯度（顶部，#EAF6FD 0%，#D9F0FC 50%，#BEE6FD 51%，#A7D9F5 100%）；
}
a、 按钮：激活{
填充：2px7px 3px9px；
边框：1px实心#73A7C4；
边界底部：0；
-莫兹盒阴影：0 1px#2C628B；
-网络工具包盒阴影：0 1px#2C628B；
盒影：0 1px#2C628B；
背景：-莫兹线性梯度（顶部，#E5F4FC 0%，#C4E5F6 50%，#98D1EF 51%，#68B3DB 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0，#E5F4FC）、颜色停止（0.5，#C4E5F6）、颜色停止（0.51，#98D1EF）、颜色停止（1，#68B3DB））；
}

---

为

.button

和

生成所需的渐变。button:hover

。所以你会得到你想要的东西。

哇，很好。非常感谢。有人能证实这在Mac和Linux上有效吗？我认为浏览器更相关。圆角在小于IE9时不起作用。渐变将在IE6下工作。这很酷-它使用的标记比我的少，但代价是浏览器兼容性差（虽然我知道你提到过）。是的，完全的浏览器兼容性可以通过背景图像实现（1x18px行就足够了）还有一些像PIE.htc或类似的黑魔法来模拟IE中的边框半径和框阴影。你也可以使用IE过滤器：对于css渐变：）我编辑了我的答案，添加了一个JSFIDLE示例。如果你愿意，你可以丰富它：）@Kyle你的JSFIDLE链接死了。你能把你的代码以代码片段的形式放在这里吗？

<button>
    <span>
       <span>
          Submit
       </span>   
    </span>
</button>

button {
    background: none;
    border: none;
    padding: 0;   
}

button span {
    display: block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #999;
    padding: 0;
    background: #F0F0F0;
    background: -moz-linear-gradient(top,  #F0F0F0 50%, #D4D4D4 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#F0F0F0), color-stop(50%,#D4D4D4));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#D4D4D4',GradientType=0 );
}

button span span {
    border: 1px solid #fff;
    padding: 10px;
}

a.button {
    height: 18px;
    padding: 2px 8px;
    border: 1px solid #F3F3F3;
    -moz-box-shadow: 0 0 0 1px #707070;
    -moz-border-radius: 3px;
    background: -moz-linear-gradient(top, #F2F2F2 0%, #EBEBEB 50%, #DDDDDD 51%, #CFCFCF 100%);
    font: normal 12px sans-serif;
    color: black;
    text-decoration: none;
}
a.button:hover {
    border: 1px solid #ECF7FD;
    -moz-box-shadow: 0 0 0 1px #3C7FB1;
    background: -moz-linear-gradient(top, #EAF6FD 0%, #D9F0FC 50%, #BEE6FD 51%, #A7D9F5 100%);
}
a.button:active {
    padding: 2px 7px 3px 9px;
    border: 1px solid #73A7C4;
    border-bottom: 0;
    -moz-box-shadow: 0 0 0 1px #2C628B;
    background: -moz-linear-gradient(top, #E5F4FC 0%, #C4E5F6 50%, #98D1EF 51%, #68B3DB 100%);
}