HTML 按钮超链接

iteye_17658

于 2016-02-20 09:05:39 发布

阅读量265

点赞数

CC 4.0 BY-SA版权

分类专栏：境-HTML

本文链接：https://blog.youkuaiyun.com/iteye_17658/article/details/82647606

境-HTML 专栏收录该内容

25 篇文章

订阅专栏

<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>

效果图：