效果演示:
我是一个链接按钮
原理:将一个链接,加上一个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>