您可以使用开发人员工具(Firefox 中的 Chrome / IE / Firebug)来检查页面并准确了解他们是如何做到的。
我从 jsFiddle 开始,只需从那些特定按钮复制代码并获取 CSS 规则即可。显然我遗漏了一些,因为它看起来并不完全相同,但是当您添加更多规则时,您可以准确地看到他们为实现该结果所做的工作。
您可以直接从 Chrome 右侧的样式选项卡中复制整个 CSS 规则。
http://jsfiddle.net/XLd3R/
.goog-inline-block {
position: relative;
display: -moz-inline-box;
display: inline-block;
}
.trans-strip {
background: -webkit-linear-gradient(right, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, .5));
background: -moz-linear-gradient(right, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, .5));
}
.button-strip {
white-space: nowrap;
}
.goog-imageless-button-collapse-right {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
margin-right: -1px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topright: 0;
}
.goog-imageless-button, .navbuttonouter {
background: #f5f5f5;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
background-image: -ms-linear-gradient(top, #f5f5f5, #f1f1f1);
background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
background-image: linear-gradient(top, #f5f5f5, #f1f1f1);
border: 1px solid #dcdcdc;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 2px;
color: #444;
cursor: pointer;
font-size: 11px;
font-weight: bold;
height: 27px;
line-height: 27px;
min-width: 54px;
outline: none;
padding: 0 8px;
text-align: center;
transition: all .218s;
-moz-border-radius: 2px;
-moz-transition: all .218s;
-moz-user-select: none;
-o-transition: all .218s;
-webkit-border-radius: 2px;
-webkit-transition: all .218s;
-webkit-user-select: none;
}
.goog-imageless-button, .navbuttonouter {
color: #444;
cursor: pointer;
font-size: 11px;
font-weight: bold;
line-height: 27px;
text-align: center;
}