CSS按钮式超链接实例
内容提要：本文讲解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="https://520psd.com/wp-content/uploads/pshpic/tx53wmknqqe.html" target="_blank">网页制作</a></td><td><a href="https://520psd.com/wp-content/uploads/pshpic/zywwpfxa4i0.html" target="_blank">操作系统</a></td><td><a href="https://520psd.com/wp-content/uploads/pshpic/1jrpsqmnbfa.html" target="_blank">网络安全</a></td><td><a href="https://520psd.com/wp-content/uploads/pshpic/cv5zl2of1du.html" target="_blank">工具软件</a></td><td><a href="https://520psd.com/wp-content/uploads/pshpic/app5fpkugnh.html" target="_blank">电脑医院</a></td></tr></table></body></html>
