先上一張效果圖
這是一個搜索按鈕，帶了一個搜索的小圖標。寫的CSS在IE6和IE7中的兼容性不是很好。四邊的圓角使用了CSS3的屬性。
一、小圖標用字體制作
上面的搜索圖標，我是通過網站icomoon，在線生成的，這個網站在國外，國內訪問比較慢，用代理或翻牆工具上去會比較快。網站如下圖：
做好一系列選擇后，點擊下載，會自動生成字體文件，和CSS的demo
在自己的文件中引用很方便：
@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-fl11l'); src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'), url('fonts/icomoon.woff?-fl11l') format('woff'), url('fonts/icomoon.ttf?-fl11l') format('truetype'), url('fonts/icomoon.svg?-fl11l#icomoon') format('svg'); font-weight: normal; font-style: normal; } .ficomoon{font-family:'icomoon';-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .icon-search:before {content: "\e601"}
二、按鈕框架
為了簡單方便點，我用了a標簽作為按鈕的最外層
<a href="#" class="btn_green"> <font class="icon_pre ficomoon icon-search"></font> <font class="icon_next">篩選</font> </a>
.btn_green{ text-decoration:none; display:inline-block; color:#fff; overflow:hidden; vertical-align:middle; font-size: 1em; line-height: 1.4; }
1、a標簽中的line-height是用來撐高度的，如果不加會出現下面的情況：
關於line-height的原理介紹，網上有很多材料可以瀏覽，有必要的去了解下的。
2、overflow:hidden是用來清除浮動的。
三、按鈕內容
根據效果圖可以看出，按鈕分為左右兩部分。
左邊部分如下：
<font class="icon_pre ficomoon icon-search"></font>
.icon_pre{ padding:8px 15px; border-right:1px solid #c9e7de; background:#69bda4; border-radius:4px 0 0 4px; float:left }
border-right顯示那條分割線，其余的代碼是在顯示字體圖標。
右邊部分如下：
<font class="icon_next">篩選</font>
.icon_next{ padding:8px 30px; background:#69bda4; border-radius:0 4px 4px 0; float:left }
兩部分都用了float浮動，我不太喜歡用這個屬性，但不用就會出現中間有很大的間隔。而且由於font是內聯元素，所以padding-top和padding-bottom無效。
用了浮動后就能讓font變為塊級元素，使得padding有效，而且也會讓兩個元素緊緊的挨着，不出現間隔。
在網上有很多關於浮動原理的說明，有必要去了解下的。
大家如果有更好更簡單的方法，請不要吝嗇，貼出來分享一下呀。
demo下載：
http://download.csdn.net/download/loneleaf1/8163273