在網上經常會看到一些非常漂亮的按鈕，其中有一種按鈕左邊是漂亮的圖標，右邊是文字，看起來很酷。網上大多漂亮的按鈕都是圖片按鈕，需要用到PS來不斷的P，直到達到想要的效果，如果尺寸有偏差還得繼續P。另外後期要給整個網站換效果，還得把所有的圖片都P一遍，想想就覺得。。。這樣太實在太讓人蛋疼了，個人傾向用CSS來實現效果，這樣大小、風格、效果都可以統一控制，可謂是一勞永逸啊。經過幾天的不懈的努力學習，終於找到了兩種比較簡單的方法。
一、利用<button>標籤來實現。
最開始用<input>的button類型來實現，把圖標設爲button的背景，然後給button設置padding-left爲圖標空出空間。剛開始看起來還可以，效果也都達到了，可這樣的話就不能控制圖標的大小了，所以圖標的大小本身就是合適的大小，想想這樣還是很蛋疼。天無絕人之路，偶然看到一篇文章，某位好心人翻譯的一篇老外寫的文章《被遺忘掉的button標籤》，看完後真是受益良多的。
注：
《被遺忘掉的button標籤》http://particletree.com/features/rediscovering-the-button-element/
《被遺忘掉的button標籤》譯文地址http://www.jb51.net/web/6454.html
<!--button標籤實現的帶圖片的按鈕!-->
button標籤實現的帶圖片的按鈕<p />
<button type="button" ><img src="image/cut.png"/>Cut</button>
<button type="button" ><img src="image/save.png"/>Save</button>
<button type="button" ><img src="image/search.png"/>Search</button>
<button type="button" ><img src="image/openfile.png"/>Open File</button>
<p />
<style type="text/css">
button{
display:inline-block;
overflow:visible;/*在IE瀏覽器要設置該樣式讓按鈕自適應大小*/
padding:2px 10px 2px 10px;
background-color:#F0FFF0;
border:solid 1px #dddddd;
text-decoration:none;
font-size:12pt;
font-weight:bold;
color:#777777;
text-align:left;
}
button img{
border:0px;
vertical-align:middle;/*讓圖片與文字垂直居中顯示*/
margin-right:5px;
width:20px;
width:20px;
}
/*萬惡的IE6不支持該效果*/
button:hover{
cursor:hand;
color:#444444;
border:1px solid #aaaaaa;
background-color:#E6E6FA;
}
</style>二、利用<a>標籤來實現圖片按鈕
利用<a>標籤可以實現各種各樣漂亮的button，很自然的可以實現圖片+文字的按鈕，而且可以方便地控制鼠標懸停、點擊等效果，但是在表單中，我覺得還是<button>標籤比較靠譜。
<!--a標籤實現的帶圖片的按鈕!-->
a標籤實現的帶圖片的按鈕<p />
<a href="#" ><img src="image/cut.png"/>Cut</a>
<a href="#" ><img src="image/save.png"/>Save</a>
<a href="#" ><img src="image/search.png"/>Search</a>
<a href="#" ><img src="image/openfile.png"/>Open File</a>
<style type="text/css">
a{
display:inline-block;/*按鈕自適應大小*/
padding:2px 10px 2px 10px;
background-color:#F0FFF0;
border:solid 1px #dddddd;
text-decoration:none;
font-size:12pt;
font-weight:bold;
color:#777777;
text-align:left;
}
a img{
border:0px;
vertical-align:middle;/*讓圖片與文字垂直居中顯示*/
margin-right:5px;
width:20px;
width:20px;
}
a:hover{
cursor:hand;
color:#444444;
border:1px solid #aaaaaa;
background-color:#E6E6FA;
}
</style>小結：如果單純說要實現這種圖片+文字的按鈕效果，我覺得方法還是很多的，比方說萬能的<div>+js也可以實現，但是從簡潔和控制的方便性來說，我覺得<button>和<a>標籤來實現是最好的（水平有限，個人愚見哈，不要向我噴水）。