效果
css实现
<html>
<head>
<title>按钮超链接</title>
<style> a{ /* 统一设置所有样式 */
font-family: Arial;
font-size: .8em;
text-align:center;
margin:3px;
}
a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */
color: #A62020;
padding:4px 10px 4px 10px;
background-color: #ecd8db;
text-decoration: none;
border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #;
border-right: 1px solid #;
}
a:hover{ /* 鼠标经过时的超链接 */
color:#; /* 改变文字颜色 */
padding:5px 8px 3px 12px; /* 改变文字位置 */
background-color:#e2c4c9; /* 改变背景色 */
border-top: 1px solid #; /* 边框变换，实现“按下去”的效果 */
border-left: 1px solid #;
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
}
</style>
</head>
<body>
<a href="#"> Home </a>
<a href="#"> Contact Us</a>
<a href="#"> Web Dev</a>
<a href="#"> Web Design</a>
<a href="#"> Map </a>
</body>
</html>