原来的按钮是这样的。
新设计的按钮是这样的。
事实上，不仅是gmail，google公司很多其他项目都在使用后一种风格的按钮。
这种按钮设计最大的特点，就是完全不使用背景图片，是纯粹的html+css。同时，它也不使用任何表单元素，目的是在不同浏览器下，争取视觉效果的最大统一。
to see the final code we ended up using in gmail and reader, you'll have to reverse engineer the button code in one of those products. 如果你想看我们在gmail和google reader中使用的最终代码，你必须自己对按钮代码进行反向工程。
我对这个很有兴趣，昨天晚上就真的去做反向工程了。由于gmail的css文件都是被压缩过的，简直无法读，不过好在按钮部分还没有被压缩，因此还算顺利，就把代码提取出来了。
下面我就来介绍，如何制作gmail式的按钮。使用的全部都是gmail中的实际代码。
第一步，按钮的html代码如下：
<div class="goog-imageless-button goog-inline-block"> <div class="goog-inline-block goog-imageless-button-outer-box"> <div class="goog-inline-block goog-imageless-button-inner-box"> <div class="goog-imageless-button-pos"> <div class="goog-imageless-button-top-shadow"> </div> <div class="goog-imageless-button-content">button</div> </div>
每个按钮都是一个四层的盒状结构，共包含6个div区块。
@import url("button.css");
这个时候，按钮就应该可以正常显示了。
第三步，做一些修饰工作。
你可以根据按钮的不同情况，为前面html代码中第1个div区块，添加相应的class。
i. 如果一个按钮是主按钮，那么添加"goog-imageless-button-primary"。 ii. 如果一个按钮不允许用户使用，那么添加"goog-imageless-button-disabled"。 iii. 如果好几个按钮组成一个"按钮组"，就像范例中的example 3，那么最左边的按钮添加"goog-imageless-button-collapse-right"，最右边的按钮添加"goog-imageless-button-collapse-left"，中间的按钮则是同时添加这两个class。 iv. 如果一个按钮保持选中状态，那么添加"goog-imageless-button-checked"。
i. 加入鼠标悬停效果。
$(".goog-imageless-button").hover( function(){ if(!$(this).hasclass("goog-imageless-button-disabled")){ $(this).addclass("goog-imageless-button-hover"); } }, $(this).removeclass("goog-imageless-button-hover"); );
ii. 加入鼠标点击的效果。
$(".goog-imageless-button").mousedown( $(this).addclass("goog-imageless-button-checked"); ).mouseup( $(this).removeclass("goog-imageless-button-checked");
iii. 加入focus和blur事件的代码。
$(".goog-imageless-button").focus(function(){$(this).addclass("goog-imageless-button-focused")}); $(".goog-imageless-button").blur(function(){$(this).removeclass("goog-imageless-button-focused")});
到了这一步，就算基本完成了。以后只要再针对按钮的click或submit事件，写入相应代码与服务器端互动，就可以了。
最后，说一点我的看法。
（完）