2010-10-18 15:58:07 纯DIV CSS按钮(图+例子+下载)
DIV+CSS按钮模块;纯DIV CSS按钮模板下载观看
CSS按钮效果图
<!DOCTYPE html> <html> <head> <title>50个CSS超炫丽button按钮样式代码-html8.com.cn</title> <link href="button.css" rel="stylesheet" type="text/css" /> <!-- html8.com.cn --> </head> <body> <A href="html8.com.cn">HTML8</A>|<A href="html8.com.cn">CSS</A> <form id="form1" name="form1" method="" action="//www.html8.com.cn/" target="_blank"> <div class="d1"> <input type="submit" value="Update" onMouseOver="this.style.borderColor='#75cd02'" onMouseOut="this.style.borderColor='#dcdcdc'" class="btn1 pbtn1" /> <input type="submit" value="Delete" onMouseOver="this.style.borderColor='#f76b00'" onMouseOut="this.style.borderColor='#dcdcdc'" class="btn2 pbtn1" /> <input type="submit" value="Reset" onMouseOver="this.style.borderColor='#86c6f7'" onMouseOut="this.style.borderColor='#dcdcdc'" class="btn3 pbtn1" /><br /> <input type="button" value="Submit" class="btn4" /> <input type="button" value="Button" class="btn5" /> <input type="button" value="Add Group" class="btn6" onMouseOver="this.style.backgroundPosition='left -35px'" onMouseOut="this.style.backgroundPosition='left top'" /><br /> <button type="button" class="pbtn2"><img src="image/button/register.gif" alt="register" /></button> <button type="button" class="pbtn2 btn8"><img src="image/button/favorite.gif" alt="favorite" /></button> <button type="button" class="pbtn2 btn9"><img src="image/button/help.gif" alt="help" /></button><br /> <input type="button" class="btn10" onMouseOver="this.style.backgroundPosition='left -40px'" onMouseOut="this.style.backgroundPosition='left top'" value="Submit" /> <input type="button" class="btn11" onMouseOver="this.style.backgroundPosition='left -40px'" onMouseOut="this.style.backgroundPosition='left top'" value="Sbumit" /> <input type="button" class="btn12" onMouseOver="this.style.backgroundPosition='left -40px'" onMouseOut="this.style.backgroundPosition='left top'" value="Sbumit" /><br /> <button type="button" class="pbtn3"></button> <button type="button" class="pbtn3 btn14"></button> <button type="button" class="pbtn3 btn15"></button><br /> <button type="button" class="btn16"></button> <button type="button" class="btn17"></button> <button type="button" class="btn18"></button><br /> <button type="button" class="btn19" onMouseOver="this.style.backgroundPosition='left -36px'" onMouseOut="this.style.backgroundPosition='left top'" value="Sbumit"></button> <button type="submit" class="btn20" onMouseOver="this.style.backgroundPosition='left -37px'" onMouseOut="this.style.backgroundPosition='left top'" value="Sbumit"></button> <button type="submit" class="btn21" onMouseOver="this.style.backgroundPosition='left -40px'" onMouseOut="this.style.backgroundPosition='left top'" value="Sbumit"></button><br /> <input type="button" class="btn22" value="Downloads!" onMouseOver="this.style.backgroundPosition='left -42px'" onMouseOut="this.style.backgroundPosition='left top'" /> <input type="button" class="btn23" value="Call me !!" onMouseOver="this.style.backgroundPosition='left -45px'" onMouseOut="this.style.backgroundPosition='left top'" /> </div> <div class="d2"> <input type="button" class="btn24" value="Closed" onMouseOver="this.style.backgroundPosition='left -50px'" onMouseOut="this.style.backgroundPosition='left top'" /> <input type="button" class="btn25" value="Submit" onMouseOver="this.style.backgroundPosition='left -49px'" onMouseOut="this.style.backgroundPosition='left top'" /><br /> <input type="button" class="btn26" value="Submit" onMouseOver="this.style.backgroundPosition='left -36px'" onMouseOut="this.style.backgroundPosition='left top'" /> <input type="button" class="btn27" value="Online" /> <input type="button" class="btn28" value="Rss Feed" /><br /> <input type="button" class="btn29" value="Submit" onMouseOver="this.style.backgroundPosition='left -43px'" onMouseOut="this.style.backgroundPosition='left top'" /> <input type="button" class="btn30" value="Button" /> <input type="button" class="btn31" value="Search" /><br /> <input type="button" class="btn32" value="Search" /> <input type="button" class="btn33" value="Search" onMouseOver="this.style.backgroundPosition='left -49px'" onMouseOut="this.style.backgroundPosition='left top'" /><br /> <input type="button" class="btn34" value="Button" /> <input type="button" class="btn35" value="Button" onMouseOver="this.style.backgroundPosition='left -40px'" onMouseOut="this.style.backgroundPosition='left top'" /> <input type="button" class="btn36" value="Button" onMouseOver="this.style.backgroundPosition='left -38px'" onMouseOut="this.style.backgroundPosition='left top'" /> </div> <div class="d3"> <input type="button" class="btn37" value="Hard rock" /> <input type="button" class="btn38" value="Your profile" /> <input type="button" class="btn39" value="British" /><br /> <input type="button" class="btn40" value="Development" /> <input type="button" class="btn41" onMouseOver="this.style.backgroundPosition='left -57px'" onMouseOut="this.style.backgroundPosition='left top'" /><br /> <input type="button" class="btn42" value="Find out more" /> <input type="button" class="btn43" value="Enterprise Geteway" /><br /> <input type="button" class="btn44" value="Comments" /> <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';" /> <input type="button" class="btn46" value="Submit" onMouseOver="this.style.backgroundPosition='left -73px'" onMouseOut="this.style.backgroundPosition='left top'" /><br /> <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';" /> <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 /> <input type="button" class="btn49" /> <input type="button" class="btn50" /> </div> </form> </body> </html> |
CSS按钮演示地址://www.html8.com.cn/fanli/css-bottom/
DIV+CSS按钮下载地址: