立体变换的按钮

下面为效果显示

脚本说明:
把如下代码加入<body>区域中
<style type="text/css">
<!--

.text {  font-family: "Arial", "Helvetica", "sans-serif"; font-size: 12pt; color: #ff0000 }
a:hover {  font-family: "Arial", "Helvetica", "sans-serif"; font-size: 12pt; color: #000000 ;text-decoration : none }
.normal {background-color:#ccccc; }
.over {background-color:#cccccc; border-top: 1px #ffffff solid;  border-left: 1px #ffffff solid; border-right: 1px #999999 solid; border-bottom: 1px #999999 solid }
.down {background-color:#cccccc; border-top: 1px #999999 solid;  border-left: 1px #ffffff solid; border-right: 1px #ffffff solid; border-bottom: 1px #ffffff solid }
.link {text-decoration: none; color:#000000; font-family: 宋体}
-->
</style>
<table width="80" border="0" cellpadding="0" cellspacing="0" height="30">
<tr>
<td class=normal onmouseover='this.className="over"' onmousedown='this.className="down"' onmouseup='this.className="over"' onmouseout='this.className="normal"' >
<div align="center" >
<a style="cursor: default" href="http://www.k688.com" target="_blank">立体按钮</a>
</div>
</td>
</tr>
</table>