用樣式美化button（2）

日期：2013-12-13  來源：攀枝花惠康網絡公司

在這個例子中還可以在button中嵌入icon的來增添它的視覺效不美觀，篇幅有限就不在這里舉例子了。

在css中你會發現此賭暌姑到了position:relative;是為體味決ie和firefox下點擊后下沉錯位的問題。但在opera下仍是會沒解決失蹤。還請巨匠多多輔佐。

我們經常使用到a,button,input等標簽，經由過程css加布景等體例來實現按鈕的效不美觀?？墒且鲆粋€通用的樣式類，又能保證在各個瀏覽器下默示一致，還能有很好的擴展性的按紐可不就那么輕易了。好了廢話少說。進入正題。

首先我們選擇a和button兩個標簽作為通用按紐的外包裝器。首要考慮到，在ie6不撐持a以外的:hover謂馓瀣使用a就可以對按鈕做懸浮狀況，這就是為什么選擇他們做為最外層的包裝器而不是span或者其他的標簽。為什么不用input下面會具體說到。

先來熟悉一下button的類型(type)，button，默認的類型。submit，該可以用來提交表單，功能同<input type=”submit” value=http://www.css88.com/archives/”提交” />。reset，可以用來恢復表單默認值。如下

123456 &lt;form action=""&gt;&lt;input type="text" value="I LOVE CHINA" /&gt;&lt;button type="button"&gt;type="button"，我是一個默認的button,&lt;/button&gt;&lt;button type="submit"&gt;type="submit"，我可以用來提交表單&lt;/button&gt;&lt;button type="reset"&gt;type="reset"，我可以來恢復表單默認值&lt;/button&gt;&lt;/form&gt;

但如不美觀想讓button在各個瀏覽器和各類操作系統下默示一致。仍是一件斗勁讓人頭疼的工作。

之前說了，當button的type屬性為submit的時辰，同樣可以對表單進行提交，那為什么要選擇button,而不是input。原因有兩點。

1. 表單中，在css中可以經由過程標簽名字來作為選擇器，對輸入框和按鈕進行樣式節制，在不撐持css2屬性選擇器的瀏覽器中，這點很是主要。
2. 可以在button內甚至可以嵌入div，p這樣的標簽標簽，其擴展性那是相當的好。

在對button斷根padding和border之后，ie6，7城市在上內邊距發生1個像素的空間，firefox2，3（beta5）則會發生擺布內邊距3個像素和上內邊距1個像素的空白，opera和safari則不會發生多余的內邊距填充。請看圖。這些差異給我們美化button上填了良多麻煩。

下面經由過程一個例子來演示一下通用button的建造

Html

1     &lt;button class=&lt;b&gt;&lt;b&gt;有樂趣有樂趣&lt;/b&gt;&lt;/b&gt;&lt;/button&gt;

在這里采用了三層標簽的結構，讓最內層<b>的布景repeat-x，獲得自順應文字寬度。當然也可以兩層標簽結構的使用滑動門手藝實現。但如不美觀要通用的話，那滑動門的布景至少要有800px的寬（考慮到寬屏，文字長等情形）

Images

左邊圓角

中心一再布景

右邊圓角

在建造的過程中，也許會問，為什么不將三張合成一張布景，其適ё儕因就是膳縵沔提到的。每個瀏覽器下對button標簽的默認內間距詮釋的都紛歧樣。所以只能經由過程布景垂直居中的體例來解決三張圖片對齊的問題。

CSS

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647     .btn{display:inline-block;display:-moz-inline-stack;*display:inline;zoom:1;margin:0;border:0;padding:0 5px 0 0;text-align:center;font-family:"微軟雅黑",YaHei,"黑體";vertical-align:middle;font-size:0.8em;color:#000;text-decoration:none;background:url("../img/span>right  no-repeat;}button.btn{cursor:pointer;width:auto;*overflow:visible;border:0 none;background-color:none;vertical-align:middle;}.btn b{display:inline-block;display:-moz-inline-stack;*display:inline;zoom:1;padding:0 0 0 5px;position:relative;white-space:nowrap;font-weight:normal;height:22px;line-height:22px;background:#FFD8D3 url("../img/yn_btn_pink_left.gif") left  no-repeat;_background-color:#FFF;}button.btn b b{_margin-top:1px;padding:0px 8px;height:22px;line-height:22px;cursor:background:#FFD8D3 url("../img/yn_btn_pink_center.gif") left repeat-x;_background-color:#FFF;}