管理资源吧首页>>>教程>>>编程>>>CSS/HTML教程>>>

凸起的按钮效果

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3Djavascript%3E%20%20%0D%0Afunction%20movr(src)%20%20%0D%0A%7B%20%20%20%20src.onselectstart%20%3D%20new%20Function(%22return%20false%22)%3B%20%20%0D%0Awith%20(src.style)%20%7B%20%20%0D%0A%20%20%20%20%20%20%20%20color%3D%22red%22%20%20%0D%0AborderLeft%20%20%3D%20%221px%20solid%20buttonhighlight%22%3B%20%20%0D%0AborderRight%20%3D%20%221px%20solid%20buttonshadow%22%3B%20%20%0D%0AborderTop%20%20%3D%20%221px%20solid%20buttonhighlight%22%3B%20%20%0D%0AborderBottom%20%3D%20%221px%20solid%20buttonshadow%22%3B%20%20%0D%0Apadding%20%20%20%3D%20%220%22%3B%20%20%0D%0Acursor%3D%22hand%22%3B%20%0D%0A%7D%20%20%0D%0A%7D%20%20%0D%0Afunction%20mdwn(src)%20%20%0D%0A%7B%20%20%20%20src.onselectstart%20%3D%20new%20Function(%22return%20false%22)%3B%20%20%0D%0Awith%20(src.style)%20%7B%20%20%0D%0A%20%20%20%20%20%20%20%20color%3D%22red%22%20%20%0D%0AborderRight%20%20%3D%20%221px%20solid%20buttonhighlight%22%3B%20%20%0D%0AborderLeft%3D%20%221px%20solid%20buttonshadow%22%3B%20%20%0D%0AborderBottom%20%20%3D%20%221px%20solid%20buttonhighlight%22%3B%20%20%0D%0AborderTop%20%3D%20%221px%20solid%20buttonshadow%22%3B%20%20%0D%0Apadding%20%20%20%3D%20%220%22%3B%20%20%0D%0A%7D%20%20%0D%0A%7D%20%20%0D%0Afunction%20mout(src)%20%20%0D%0A%7B%20%20%20%20src.onselectstart%20%3D%20new%20Function(%22return%20false%22)%3B%20%20%0D%0Awith%20(src.style)%20%7B%20%20%0D%0A%20%20%20%20%20%20%20%20color%3D%22black%22%20%20%0D%0Abackground%20%3D%20%22buttonface%22%3B%20%2F%2F%E6%AD%A4%E4%B8%BA%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E5%90%8E%E7%9A%84%E9%A2%9C%E8%89%B2%EF%BC%8C%E5%8F%AF%E6%A0%B9%E6%8D%AE%E9%9C%80%E8%A6%81%E6%94%B9%E5%8F%98%20%0D%0Aborder%20%3D%20%221px%20solid%20buttonface%22%3B%20%20%0D%0Apadding%20%20%20%3D%20%220%22%3B%20%20%0D%0A%7D%20%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E">

<table width=100 bgcolor=buttonface>  
<tr>  
<td width=100% name="cool" bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
button  
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
button  
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
button  
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
button  
</td>  
</tr>  
</table>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　

<style>

body{background: #DDD;} 
table 
{ 
  width: 450px;height:75; 
  background: #CCC;filter:progid:DXImagetransform.microsoft.shadow(strength=10,direction=135,color=#666666); 
} 
td{text-align: center;} 
td a{ 
    width: 100px; 
    30px; 
    text-align: center; 
    border-top: 2px solid #FFF; 
    border-bottom: 2px solid #333; 
    text-decoration: none;padding:3px; 
} 
td a:hover{ 
    background: #DDD;font-family:华文行楷;padding:5px; 
} 
td a:active 
{ 
    padding:7px; 
    color: #ED1C24; 
    font-weight: bold; 
} 
</style>

<table  border="0" align="center"> 
<tr> 
<td><a href="#" _ewebeditor_ta_href="%23">金翅擘海</a></td><td><a href="#" _ewebeditor_ta_href="%23"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a></td><td><a href="#" _ewebeditor_ta_href="%23">独来读网</a></td><td><a href="#" _ewebeditor_ta_href="%23">野火寒烟</a></td> 
</tr> 
<tr> 
<td><a href="#" _ewebeditor_ta_href="%23">萧萧小雨</a></td><td><a href="#" _ewebeditor_ta_href="%23">湖面无舟</a></td><td><a href="#" _ewebeditor_ta_href="%23">孤零飘客</a></td><td><a href="#" _ewebeditor_ta_href="%23">天牙海脚</a></td> 
</tr> 
</table>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　

<body style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=blue,endColorStr=white);"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3Djavascript%3E%20%20%0D%0Afunction%20movr(src)%20%20%0D%0A%7B%20%20%20%20src.onselectstart%20%3D%20new%20Function(%22return%20false%22)%3B%20%20%0D%0Awith%20(src.style)%20%7B%20%20%0D%0A%20%20%20%20%20%20%20%20color%3D%22red%22%20%20%0D%0AborderLeft%20%20%3D%20%222px%20solid%20buttonhighlight%22%3B%20%20%0D%0AborderRight%20%3D%20%222px%20solid%20buttonshadow%22%3B%20%20%0D%0AborderTop%20%20%3D%20%222px%20solid%20buttonhighlight%22%3B%20%20%0D%0AborderBottom%20%3D%20%222px%20solid%20buttonshadow%22%3B%20%20%0D%0Apadding%20%20%20%3D%20%220%22%3B%20%20%0D%0Acursor%3D%22hand%22%3B%20%0D%0A%7D%20%20%0D%0A%7D%20%20%0D%0Afunction%20mdwn(src)%20%20%0D%0A%7B%20%20%20%20src.onselectstart%20%3D%20new%20Function(%22return%20false%22)%3B%20%20%0D%0Awith%20(src.style)%20%7B%20%20%0D%0A%20%20%20%20%20%20%20%20color%3D%22red%22%20%20%0D%0AborderRight%20%20%3D%20%221px%20solid%20buttonhighlight%22%3B%20%20%0D%0AborderLeft%3D%20%221px%20solid%20buttonshadow%22%3B%20%20%0D%0AborderBottom%20%20%3D%20%221px%20solid%20buttonhighlight%22%3B%20%20%0D%0AborderTop%20%3D%20%221px%20solid%20buttonshadow%22%3B%20%20%0D%0Apadding%20%20%20%3D%20%220%22%3B%20%20%0D%0A%7D%20%20%0D%0A%7D%20%20%0D%0Afunction%20mout(src)%20%20%0D%0A%7B%20%20%20%20src.onselectstart%20%3D%20new%20Function(%22return%20false%22)%3B%20%20%0D%0Awith%20(src.style)%20%7B%20%20%0D%0A%20%20%20%20%20%20%20%20color%3D%22black%22%20%20%0D%0Abackground%20%3D%20%22buttonface%22%3B%20%2F%2F%E6%AD%A4%E4%B8%BA%E9%BC%A0%E6%A0%87%E7%A7%BB%E5%8A%A8%E5%90%8E%E7%9A%84%E9%A2%9C%E8%89%B2%EF%BC%8C%E5%8F%AF%E6%A0%B9%E6%8D%AE%E9%9C%80%E8%A6%81%E6%94%B9%E5%8F%98%20%0D%0Aborder%20%3D%20%221px%20solid%20buttonface%22%3B%20%20%0D%0Apadding%20%20%20%3D%20%220%22%3B%20%20%0D%0A%7D%20%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E">

<table width=60 cellspacing="16" bgcolor=buttonface style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=blue,endColorStr=white);">  
<tr>  
<td width=100% name="cool" bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
<Font Size=4 Face="微软简行楷"><Font Color="#FF0080">鹤</Font><Font Color="#AA55AA">发</Font><Font Color="#55AAD4">童</Font><Font Color="gold">颜</Font></Font> 
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
<Font Size=4 Face="微软简行楷"><Font Color="#FF00FF">青</Font><Font Color="#0080FF">梅</Font><Font Color="#55C000">竹</Font><Font Color="#FF0000">马</Font></Font> 
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
<b><font color="#FF0000">知</font><font color="#55C000">往</font><font color="#0080FF">观</font><font color="#FF00FF">来</font></b> 
</td>  
<td width=100% bgcolor=buttonface onmouseover='movr(this)' onmouseout='mout(this)' onmouseup='movr(this)' onmousedown='mdwn(this)'>  
<B><font color="Red">金</font></B><B><font color="green">翅</font></B><B><font color="orange">擘</font></B><B><font color="blue">海</font></B>
<B> 
</td>  
</tr>  
</table>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程