内容提要：本文讲解CSS按钮式超链接，并给出思路和实例，供大家学习分析。
按钮式超链接此类实例的思路：其实就是将四个边框的颜色分别进行设置，左和上，右和下，一个亮一个暗，当鼠标放上去的时候，刚好相反，并且将文字的左右间距进行稍稍调整。大家在实际应用中，可根据需要，更改相关代码，实现自己需要的效果。
IT部落窝给出了实现按钮式超链接的源代码，大家可以拷贝到Dreamweaver中自己学习体会。
以下就是按钮式超链接实例的源代码，并在相应位置给出了注释，以便网友能明白其意义。
<html>
<head>
<title>CSS按钮式超链接实例</title>
<style type="text/css">
a{ /*统一设置所有样式*/
font-family:Arial, Helvetica, sans-serif; /*字体*/
font-size:14px; /*文字大小*/
text-align:center; /*对齐方式*/
margin:3px; /*间距*/
}
a:link,a:visited{ /*设置超链接正常和访问过的状态*/
color:blue; /*颜色*/
padding:4px 10px 4px 10px; /*空格*/
background-color:red; /*背景颜色*/
text-decoration:none; /*下划线无*/
border-top:1px solid #EEEEEE; /*实现上面边框阴影效果*/
border-left:1px solid #EEEEEE; /*实现左面边框阴影效果，设置成和上边框一样*/
border-bottom:1px solid #717171; /*实现下面边框阴影效果*/
border-right:1px solid #7171771; /*实现右面边框阴影效果，设置成和下边框一样*/
}
a:hover{ /*鼠标经过时候的超链接*/
color:#9900FF; /*改变文字颜色*/
padding:5px 8px 3px 12px; /*改变文字位置*/
background-color:#00FF00; /*改变背景颜色*/
border-top:1px solid #717171; /*边框变换，实现按下去的效果*/
border-left:1px solid #717171; /*边框变换，实现按下去的效果，和正常状态的右下互换颜色*/
border-bottom:1px solid #EEEEEE; /*边框变换，实现按下去的效果*/
border-right:1px solid #EEEEEE; /*边框变换，实现按下去的效果，和正常状态的上左互换颜色*/
}
</style>
</head>
<body>
<table width="450" align="center" border="0">
<tr height="20">
<td><a href="http://www.ittribalwo.com/list.asp?id=2" target="_blank">网页制作</a></td>
<td><a href="http://www.ittribalwo.com/list.asp?id=3" target="_blank">操作系统</a></td>
<td><a href="http://www.ittribalwo.com/list.asp?id=7" target="_blank">网络安全</a></td>
<td><a href="http://www.ittribalwo.com/list.asp?id=8" target="_blank">工具软件</a></td>
<td><a href="http://www.ittribalwo.com/list.asp?id=28" target="_blank">电脑医院</a></td>
</tr>
</table>
</body>
</html>
