效果预览：http://keleyi.com/keleyi/phtml/divcss/7.htm
html完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>多个漂亮的按钮样式和图片集合 -柯乐义</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <link href="http://keleyi.com/keleyi/phtml/divcss/7/button.css" rel="stylesheet" type="text/css" /> 7 </head> 8 <body> 9 <div style="800px;margin:0px auto"> 10 <span style="font-size:18px; font-weight:bold; text-align:center; line-height:25px; color:#000; 100%">漂亮的按钮样式和图片集合<br /> 11 <a href="http://keleyi.com" target="_blank" style="color:#000">柯乐义</a>网站出品（<a href="http://keleyi.com" style="color:#000" target="_blank">http://keleyi.com</a>）<br /> 12 <br /> 13 </span><a href="http://keleyi.com/a/bjac/sfvge398.htm">原文</a> 14 </div> 15 <form id="form-keleyi-com" name="form-keleyi-com" action="http://keleyi.com/" target="_blank"> 16 <div class="d1"> 17 <input type="submit" value="Update" onmouseover="this.style.borderColor='#75cd02'" onmouseout="this.style.borderColor='#dcdcdc'" class="btn1 pbtn1" /> 18 <input type="submit" value="Delete" onmouseover="this.style.borderColor='#f76b00'" onmouseout="this.style.borderColor='#dcdcdc'" class="btn2 pbtn1" /> 19 <input type="submit" value="Reset" onmouseover="this.style.borderColor='#86c6f7'" onmouseout="this.style.borderColor='#dcdcdc'" class="btn3 pbtn1" /><br /> 20 <input type="button" value="Submit" class="btn4" /> 21 <input type="button" value="Button" class="btn5" /> 22 <input type="button" value="Add Group" class="btn6" onmouseover="this.style.backgroundPosition='left -35px'" onmouseout="this.style.backgroundPosition='left top'" /><br /> 23 <button type="button" class="pbtn2"><img src="http://keleyi.com/keleyi/phtml/divcss/7/image/button/register.gif" alt="register" /></button> 24 <button type="button" class="pbtn2 btn8"><img src="http://keleyi.com/keleyi/phtml/divcss/7/image/button/favorite.gif" alt="favorite" /></button> 25 <button type="button" class="pbtn2 btn9"><img src="http://keleyi.com/keleyi/phtml/divcss/7/image/button/help.gif" alt="help" /></button><br /> 26 <input type="button" class="btn10" onmouseover="this.style.backgroundPosition='left -40px'" onmouseout="this.style.backgroundPosition='left top'" value="Submit" /> 27 <input type="button" class="btn11" onmouseover="this.style.backgroundPosition='left -40px'" onmouseout="this.style.backgroundPosition='left top'" value="Sbumit" /> 28 <input type="button" class="btn12" onmouseover="this.style.backgroundPosition='left -40px'" onmouseout="this.style.backgroundPosition='left top'" value="Sbumit" /><br /> 29 <button type="button" class="pbtn3"></button> 30 <button type="button" class="pbtn3 btn14"></button> 31 <button type="button" class="pbtn3 btn15"></button><br /> 32 <button type="button" class="btn16"></button> 33 <button type="button" class="btn17"></button> 34 <button type="button" class="btn18"></button><br /> 35 <button type="button" class="btn19" onmouseover="this.style.backgroundPosition='left -36px'" onmouseout="this.style.backgroundPosition='left top'" value="Sbumit"></button> 36 <button type="submit" class="btn20" onmouseover="this.style.backgroundPosition='left -37px'" onmouseout="this.style.backgroundPosition='left top'" value="Sbumit"></button> 37 <button type="submit" class="btn21" onmouseover="this.style.backgroundPosition='left -40px'" onmouseout="this.style.backgroundPosition='left top'" value="Sbumit"></button><br /> 38 <input type="button" class="btn22" value="Downloads!" onmouseover="this.style.backgroundPosition='left -42px'" onmouseout="this.style.backgroundPosition='left top'" /> 39 <input type="button" class="btn23" value="Call me !!" onmouseover="this.style.backgroundPosition='left -45px'" onmouseout="this.style.backgroundPosition='left top'" /> 40 </div> 41 <div class="d2"> 42 <input type="button" class="btn24" value="Closed" onmouseover="this.style.backgroundPosition='left -50px'" onmouseout="this.style.backgroundPosition='left top'" /> 43 <input type="button" class="btn25" value="Submit" onmouseover="this.style.backgroundPosition='left -49px'" onmouseout="this.style.backgroundPosition='left top'" /><br /> 44 <input type="button" class="btn26" value="Submit" onmouseover="this.style.backgroundPosition='left -36px'" onmouseout="this.style.backgroundPosition='left top'" /> 45 <input type="button" class="btn27" value="Online" /> 46 <input type="button" class="btn28" value="Rss Feed" /><br /> 47 <input type="button" class="btn29" value="Submit" onmouseover="this.style.backgroundPosition='left -43px'" onmouseout="this.style.backgroundPosition='left top'" /> 48 <input type="button" class="btn30" value="Button" /> 49 <input type="button" class="btn31" value="Search" /><br /> 50 <input type="button" class="btn32" value="Search" /> 51 <input type="button" class="btn33" value="Search" onmouseover="this.style.backgroundPosition='left -49px'" onmouseout="this.style.backgroundPosition='left top'" /><br /> 52 <input type="button" class="btn34" value="Button" /> 53 <input type="button" class="btn35" value="Button" onmouseover="this.style.backgroundPosition='left -40px'" onmouseout="this.style.backgroundPosition='left top'" /> 54 <input type="button" class="btn36" value="Button" onmouseover="this.style.backgroundPosition='left -38px'" onmouseout="this.style.backgroundPosition='left top'" /> 55 </div> 56 <div class="d3"> 57 <input type="button" class="btn37" value="Hard rock" /> 58 <input type="button" class="btn38" value="Your profile" /> 59 <input type="button" class="btn39" value="British" /><br /> 60 <input type="button" class="btn40" value="Development" /> 61 <input type="button" class="btn41" onmouseover="this.style.backgroundPosition='left -57px'" onmouseout="this.style.backgroundPosition='left top'" /><br /> 62 <input type="button" class="btn42" value="Find out more" /> 63 <input type="button" class="btn43" value="Enterprise Geteway" /><br /> 64 <input type="button" class="btn44" value="Comments" /> 65 <input type="submit" class="btn45" value="Submit" onmouseover="this.style.backgroundPosition='left -75px';this.style.color='#bcf1a7';" onmouseout="this.style.backgroundPosition='left top';this.style.color='#ffafaf';" /> 66 <input type="button" class="btn46" value="Submit" onmouseover="this.style.backgroundPosition='left -73px'" onmouseout="this.style.backgroundPosition='left top'" /><br /> 67 <input type="submit" class="btn47" value="New user interface" onmouseover="this.style.backgroundPosition='left -78px';this.style.color='#a15507';" onmouseout="this.style.backgroundPosition='left top';this.style.color='#097b96';" /> 68 <input type="button" class="btn48" value="Send Comments" onmouseover="this.style.backgroundPosition='left -67px';this.style.color='#d7bff2';" onmouseout="this.style.backgroundPosition='left top';this.style.color='#8bf8ff';" /><br /> 69 <input type="button" class="btn49" /> 70 <input type="button" class="btn50" /> 71 </div> 72 </form> 73 </body> 74 </html>