谁能猜出我应该对按钮应用什么样的CSS样式才能猜出确切的外观。

注意:我意识到这是Windows 上默认样式按钮的默认外观,我不必应用任何CSS即可获得这种样式,但是在Mac和Linux上,它并不相同,因此我不能依赖操作系统的默认样式。我将不得不自己在CSS中强制使用此样式。谁知道CSS样式可以持续产生这种效果?

最佳答案

例子
Firefox 3.6.12

Safari 5.0.3

Chrome 8

Internet Explorer 8

由于某种原因,IE8的专有filter属性不起作用(应该)。
的HTML

<button>
    <span>
       <span>
          Submit
       </span>
    </span>
</button>
带有2个子元素的跨浏览器似乎更好地工作。使用button本身作为外部元素会引起一些问题。
的CSS
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;
}
See it on jsFiddle

09-07 16:43
查看更多