原來的按鈕是這樣的。
新設計的按鈕是這樣的。
事實上，不僅是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事件，寫入相應代碼與伺服器端互動，就可以了。
最後，說一點我的看法。
（完）