DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 一個不錯的CSS模擬的按鈕效果
一個不錯的CSS模擬的按鈕效果
編輯:CSS詳解     

<style type="text/CSS">
<!--
.btnOFF{padding:3px;border:1px outset;cursor:pointer;background-color: green;width:100px;height:16px;text-align:center;}
.btnON{padding:3px;border:1px inset;background-color: #CCCC33;width:100px;height:16px;text-align:center;color:red;}
-->
</style>

<script language="JavaScript">
<!--
function setEffect(link_id)
{
 var i;
 for(i=0;i<link.length;i++)
 {
  if(i != link_id)
  {
   link[i].className = "btnOFF";
  }
  else
  {
   link[i].className = "btnON";
  }
 }
}
//-->
</script>

<p align=center><span id="link" class="btnOFF" onclick="setEffect(0)">Google</span><span id="link" class="btnOFF" onclick="setEffect(1)">Baidu</span><span id="link" class="btnOFF" onclick="setEffect(2)">Sina</span><span id="link" class="btnOFF" onclick="setEffect(3)">Sohu</span><span id="link" class="btnOFF" onclick="setEffect(4)">CSDN</span><span id="link" class="btnOFF" onclick="setEffect(5)">knowsky</span></p>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved