html代碼：
<button>Rabbit</button>
CSS代碼：
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
/* 設置背景漸變葵姥。
第一個#58a用來定義一個背景色毯焕，作用是如果不兼容漸變背景的瀏覽器，會把背景色顯示成#58a */
border-radius: 4px;
/* 圓角 */
box-shadow: 0 1px 5px gray;
/* 盒子陰影 */
color: white;
text-shadow: 0 -1px 1px #335166;
/* 字體陰影 */
font-size: 20px;
line-height: 30px;
比例篇
以上代碼能已經能得到圖1的效果了摄咆。但維護性極差。如果要修改button大小晌缘，那么字體长捧、陰影、邊框的圓角都要跟著修改放祟，工作量會變大鳍怨。在修改之前，要清楚哪些要相對單位跪妥，哪些要用絕對單位鞋喇。
首先能直接修改的是CSS部分最后2行代碼。如果要修改字號（字體大衅薄）确徙，那么行高就要做出相應的變化⌒汛現(xiàn)在從行高和字號來看，行高是字號的1.5倍鄙皇。但是從上面的代碼中芜赌，行高并沒有反映出它跟字號的關系。當某些值相互依賴時伴逸，應該把它們的相互關系用代碼表達出來缠沈。
可以直接修改行高
font-size: 20px;
line-height: 1.5;
對字體來說，用絕對單位值（px）來定義的確很好理解错蝴，也很容易掌控洲愤。但是如果要修改網頁中其他位置文字的字號，或者是修改button父元素的字號顷锰，那么button和網頁中其他地方的字號就要相應作出修改了柬赐。所以在這里用em或者百分比做單位會比較合適。
假設父元素的字號是16px（在很多瀏覽器里面官紫，默認的字號是16px）
font-size: 125%;
line-height: 1.5;
現(xiàn)在肛宋，如果button父元素的字號改變了，那么button的尺寸也會隨之改變（因為字體變大了束世，而button只設了padding酝陈，所以button會被字體撐大）。但是button的內邊距毁涉、圓角大小沉帮、陰影都不會跟著變化，所以看起來比較別扭贫堰。比如下圖穆壕。
這里我把body的字號設成5em，與圖1比起來严嗜，好像差了很多粱檀。所以我們相應也要把padding、border-radius漫玄、box-shadow和text-shadow的單位改成相對單位茄蚯。
padding:.3em.8em;
border-radius:.2em;
box-shadow: 0.05em.25emgray;
text-shadow: 0-.05em.05em#335166;
以上修改的地方，都是用原來的 絕對值÷16 得出一個近似值睦优。而 像“.3em”這類數(shù)值渗常，前面的0都省略掉了，CSS3支持這樣的省略汗盘。真實值是0.3em皱碘。
現(xiàn)在看上去比例就正常了。
這個例子中隐孽，沒進行邊框粗細的設置癌椿。因為希望button的邊框粗細始終保持1px健蕊，不受button尺寸的影響。
色彩篇
在一個網站中踢俄，顏色也是一個重要的變數(shù)缩功。比如有“確定”按鈕，也有“取消”按鈕都办。它們長得一模一樣嫡锌，就是顏色不同。
所以我們可能需要覆蓋4條聲明（border-color琳钉、background
势木、box-shadow、text-shadow）歌懒，而且還有一個大難題：要根據(jù)按鈕的亮面和暗面相對于主色調亮色和暗色的程度來分別推導出其他顏色各自的亮色和暗色啦桌。
解題思路是：這個例子中，主色調只有一個歼培，漸變只有明暗變化震蒋，所以只要把半透明的黑色或白色疊加在主色調上，即可產生主色調的亮色和暗色變體躲庄。學過PS的人都知道這種圖層原理。
border: 1px solidrgba(0, 0, 0, .1);
background: #58a linear-gradient(hsla(0, 0%, 100%, .2),transparent);
box-shadow: 0 .05em .25emrgba(0, 0, 0, .5);
text-shadow: 0 -.05em .05emrgba(0, 0, 0, .5);
至此钾虐，樣式就基本修改完成了噪窘。
最終代碼
html代碼：
<button>Rabbit</button>
CSS代碼：
padding: .3em .8em;
border: 1px solid rgba(0, 0, 0, .1);
background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
color: white;
text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
font-size: 125%;
line-height: 1.5;
如果我們要添加其他按鈕，想使用同樣的樣式效扫，只是顏色不同倔监，可以直接在這個基礎的button樣式后面覆蓋background-color屬性即可。
html代碼：
<button>Rabbit</button>
<button class="ok">OK</button>
<button class="cancel">Cancel</button>
CSS代碼：
button {
padding: .3em .8em;
border: 1px solid rgba(0, 0, 0, .1);
background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
color: white;
text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
font-size: 125%;
line-height: 1.5;
}
button.ok {
background-color: #6b0;
}
button.cancel {
background-color: #c00;
}
