首先我們來看一下最后的效果圖把：
這個就是我們最好的目標。如果敢興趣的話好吧，那你繼續看吧。
首先這個按鈕有用到css3.0的新樣式屬性。如果你的瀏覽器沒有看到邊角圓弧的樣式，那就說明你的瀏覽器版本不支持css3.0的新樣式。解決辦法，升級瀏覽器到最新的。據我所知XP、Windows Server2003最高支持的是IE8（可以看到效果了），如果你不想升級IE，那們你可要下載不是IE為內核的瀏覽器，比如火狐、谷歌、Opera等等。
好了前面這么多廢話，我們該看一下如何做出我們漂亮的按鈕吧。
其實我們這里用到了css的偽元素，hover。
首先我們必須在頁面上，放一個input類型的button按鈕。對這個button按鈕進行css的樣式的添加。
具體的css代碼如下：
1 .mybtn { 2 width:86px; 3 text-align:center; 4 line-height:100%; 5 padding-top:0.5em; 6 padding-right:2em; 7 padding-bottom:0.55em; 8 padding-left:2em; 9 font-family:Arial,sans-serif; 10 font-size:14px; 11 font-style:normal; 12 font-variant:normal; 13 font-weight:normal; 14 text-decoration:none; 15 margin-top:0px; 16 margin-right:2px; 17 margin-bottom:0px; 18 margin-left:2px; 19 vertical-align:text-bottom; 20 display:inline-block; 21 cursor:pointer; 22 zoom:1; 23 outline-width:medium; 24 outline-color:invert; 25 font-size-adjust:none; 26 font-stretch:normal; 27 border-top-left-radius:0.5em; 28 border-top-right-radius:0.5em; 29 border-bottom-left-radius:0.5em; 30 border-bottom-right-radius:0.5em; 31 box-shadow:0px 1px 2px rgba(0,0,0,0.2); 32 text-shadow:0px 1px 1px rgba(0,0,0,0.3); 33 color:#fefee9; 34 border-top-color:#da7c0c; 35 border-right-color:#da7c0c; 36 border-bottom-color:#da7c0c; 37 border-left-color:#da7c0c; 38 border-top-width:1px; 39 border-right-width:1px; 40 border-bottom-width:1px; 41 border-left-width:1px; 42 border-top-style:solid; 43 border-right-style:solid; 44 border-bottom-style:solid; 45 border-left-style:solid; 46 background-image:none; 47 background-attachment:scroll; 48 background-repeat:repeat; 49 background-position-x:0%; 50 background-position-y:0%; 51 background-size:auto; 52 background-origin:padding-box; 53 background-clip:padding-box; 54 background-color:#f78d1d; 55 }
具體的css樣式解釋還是百度一下吧，這樣可以提高你的css水平。如果你不懂css技能，但是想用到這樣的效果，那需要修改的就是按鈕的width，設置成自己按鈕合適的寬度。還有一個就是背景顏色的替換了。
寫好css樣式，寫好input的button按鈕之后，我們應該把他們關聯起來，只需要在input的button中添加class。
<input type="button" class="mybtn" value="我是按鈕" />
現在我們還差最后一部了，就是利用css的偽元素hover，
在寫一句mybtn的hover樣式。代碼如下：
.mybtn:hover { background: #f47c20; }
因為我們鼠標移上去只需要修改背景的顏色，那么我們只需要在hover樣式中修改一個屬性。
好了。看一下我們的按鈕吧。是不是很好看。哈哈哈