zoukankan      html  css  js  c++  java
  • 多个漂亮的按钮样式和图片集合

    效果预览: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>

    更多:http://www.cnblogs.com/jihua/p/webfront.html

    原文:http://keleyi.com/a/bjac/sfvge398.htm

  • 相关阅读:
    Linux之文件处理命令
    Linux基础命令
    rip实验
    Linux基础之磁盘分区
    mysql安装
    centos Apache、php、mysql默认安装路径
    You probably tried to upload too large file. Please refer to documentation for ways to workaround this limit.
    Wrong permissions on configuration file, should not be world writable!
    机器会学习么 学习总结
    实验 5 Spark SQL 编程初级实践
  • 原文地址:https://www.cnblogs.com/jihua/p/buttoncss.html
Copyright © 2011-2022 走看看