網頁執行個體：用CSS製作帶有樣式的網頁按鈕

今天把公司平台中前設計師做的按鈕部分重新設計了下，原先他使用的JS實現圖片交替變化的方式，但那樣的缺點是：佔用了input裡的ID屬性，而且disabled也不能使用，不利於程式的設計製作。
按鈕重新製作的思想：
1、實現觸發與不觸發之間的差別；
2、適用input和a；
3、多種瀏覽器下無差別。
按鈕重新製作的過程：
1、利用不同樣式實現觸發與不觸發之間的差別；
2、利用boder來類比按鈕陰影
以下代碼在IE6、IE7、FF下測試正常！
CSS部分：

代碼如下

複製代碼

.button-style01{  color:#5E7384;  font-weight: bold;  background:#CBDBE5;  border-top:1px solid #f1f1f1;  border-left:1px solid #f1f1f1;  border-right:2px solid #666;  border-bottom:2px solid #666;  height: 25px } .button-style02{  color:#fff;  font-weight: bold;  background: #859BAB;  border:1px solid #f1f1f1;  border-top:1px solid #f1f1f1;  border-left:1px solid #f1f1f1;  border-right:2px solid #666;  border-bottom:2px solid #666;  height: 25px } a.button-style01,a.button-style02 {  display:block;  height:22px;  line-height:22px;  vertical-align:middle;  padding:0px 8px; } a.button-style01:link,a.button-style01:visited {  text-decoration:none;  color:#5E7384;  border-top:1px solid #f1f1f1;  border-left:1px solid #f1f1f1;  border-right:2px solid #666;  border-bottom:2px solid #666; }   a.button-style02:hover,a.button-style02:active {  text-decoration:none;  color:#fff;  border-top:1px solid #f1f1f1;  border-left:1px solid #f1f1f1;  border-right:2px solid #333;  border-bottom:2px solid #333; } xhtml部分： <input type="submit" name="login" id="login" onclick="myoffice.submit()" value="Sign in" onmouseover="this.className='button-style02'" onmouseout="this.className='button-style01'" class="button-style01" style="width:70px;" /> <a href="#" onmouseover="this.className='button-style02'" onmouseout="this.className='button-style01'" class="button-style01">Join Free</a>