<style type="text/css">
效果演示:
原理:将一个链接,加上一个class属性,对此class属性,设置相关的css来模拟一个按钮的样式,使得链接看上去像一个按钮,并且具有鼠标未按下时的上浮效果以及鼠标按下时的下沉效果。并且当鼠标滑过时,可以高亮显示。源代码为:
<style type="text/css"> <!--a:link.button { padding: 5px; background-color: #F6F6F3; color: Black; border-left: solid 1px #FCFCFA; border-top: solid 1px #FCFCFA; border-right: solid 1px black; border-bottom: solid 1px black; text-decoration: none; font-size: smaller; } a:visited.button { padding: 5px; background-color: #F6F6F3; color: Black; border-left: solid 1px #FCFCFA; border-top: solid 1px #FCFCFA; border-right: solid 1px black; border-bottom: solid 1px black; text-decoration: none; font-size: smaller; } a:hover.button { padding: 5px; background-color: Yellow; color: Black; border-left: solid 1px #FCFCFA; border-top: solid 1px #FCFCFA; border-right: solid 1px black; border-bottom: solid 1px black; text-decoration: none; font-size: smaller; } a:active.button { padding: 5px; background-color: #A6A6A3; color: Black; border-right: solid 1px #FCFCFA; border-bottom: solid 1px #FCFCFA; border-left: solid 1px black; border-top: solid 1px black; text-decoration: none; font-size: smaller; }
--> </style>
<p><a title="我是一个链接按钮" target="_self" class="button" href="#">我是一个链接按钮</a></p>