Windows操作系统按钮样式CSS

Question

任何人都可以猜出我应该用什么样的CSS样式来按一下按钮来猜测这个样子。

注意：我意识到这是Windows上无样式按钮的默认外观，并且我不必应用任何CSS来获得此样式，但在Mac和Linux上它不一样，所以我不能依赖于OS的默认样式。我不得不在css中强迫这种风格。任何人都知道CSS样式可以持续产生这种效果吗？

Answer 1

实施例

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

Answer 2

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

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%);
}

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

[编辑]

更完整的实现：jsfiddle（随意添加IE过滤器和Opera的某些后备并编辑我的回答以发布它 - BE BOLD :)）

a.button {
    height: 18px;
    padding: 2px 8px;
    border: 1px solid #F3F3F3;
    -moz-box-shadow: 0 0 0 1px #707070;
    -webkit-box-shadow: 0 0 0 1px #707070;
    box-shadow: 0 0 0 1px #707070;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: -moz-linear-gradient(top, #F2F2F2 0%, #EBEBEB 50%, #DDDDDD 51%, #CFCFCF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#F2F2F2), color-stop(0.5,#EBEBEB),color-stop(0.51,#DDDDDD),color-stop(1,#CFCFCF));
    background: 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;
    -webkit-box-shadow: 0 0 0 1px #3C7FB1;
    box-shadow: 0 0 0 1px #3C7FB1;
    background: -moz-linear-gradient(top, #EAF6FD 0%, #D9F0FC 50%, #BEE6FD 51%, #A7D9F5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#EAF6FD), color-stop(0.5,#D9F0FC),color-stop(0.51,#BEE6FD),color-stop(1,#A7D9F5));
    background: 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;
    -webkit-box-shadow: 0 0 0 1px #2C628B;
    box-shadow: 0 0 0 1px #2C628B;
    background: -moz-linear-gradient(top, #E5F4FC 0%, #C4E5F6 50%, #98D1EF 51%, #68B3DB 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#E5F4FC), color-stop(0.5,#C4E5F6),color-stop(0.51,#98D1EF),color-stop(1,#68B3DB));
}

<a class="button" href="#">Click me</a>

[编辑2]

编辑包含IE的过滤器。 http://jsfiddle.net/Kyle_/aUsxy/3/

Answer 3

这是一个很好的教程，可以获得你想要的效果：

http://www.monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors

完全按照这种方式设置一个按钮并且采用可用的可扩展格式非常困难。

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

Answer 4

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

Answer 5

可能的变体 - 9-slice scaling的图片，如下：

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

Answer 6

为.button和.button:hover生成http://www.colorzilla.com/gradient-editor所需的渐变。所以你会得到你想要的。