<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 #717171; border-right: 1px solid #717171; } a:hover{/* 鼠标经过时的超链接 */ color:#821818;/* 改变文字颜色 */ padding:5px 8px 3px 12px;/* 改变文字位置 */ background-color:#e2c4c9;/* 改变背景色 */ border-top: 1px solid #717171;/* 边框变换,实现“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; } </style> </head> <body> <a href="#">按钮</a> <a href="#">按钮1</a> <a href="#">button</a> <a href="#">button2</a> </body> </html>
效果图: