<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用css把a链接模拟成button的样子</title>
<style type="text/css">
<!--
*{font-size:12px;}
a.button:link {
padding:3px 6px 2px 8px;
border:2px outset #ffffff;
cursor:pointer;
background-color: #d4d0c8;
text-align:center;
height:12px;
text-decoration: none;
color: #000000;
display:inline-block;
clear:both;
}
a.button:visited {
padding:3px 6px 2px 8px;
border:2px outset #ffffff;
cursor:pointer;
background-color: #d4d0c8;
text-align:center;
height:12px;
text-decoration: none;
color: #000000;
display:inline-block;
clear:both;
}
a.button:hover {
padding:3px 6px 2px 8px;
border:2px outset #ffffff;
cursor:pointer;
background-color: #d4d0c8;
text-align:center;
height:12px;
text-decoration: none;
color: #0000FF;
display:inline-block;
clear:both;
}
a.button:active {
padding:3px 6px 2px 8px;
border:2px inset;
cursor:pointer;
background-color: #d4d0c8;
text-align:center;
height:12px;
text-decoration: none;
color: #999999;
display:inline-block;
clear:both;
}
-->
</style>
</head>
<body>
<a href="http://blog.sqlsky.com" class="button">菩提树下的杨过</a> <a href="#" class="button">链接模拟的按钮</a> <button style="height:21px">真正的按钮</button>
</body>
</html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
