css创建按钮式超链接

2012/11/26 10:52:07作者：佚名来源：网络

移动端

【实例介绍】

css创建按钮式超链接
很多网页上的超链接都制作成各种按钮的效果，这里当鼠标移动到按钮上时实现按下去的
效果，其原理是变换边框之间的颜色。下面使用css制作一个漂亮的按钮链接。

【实例代码】


<!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=utf-8" />
<title>创建按钮式超链接</title>
</head>
<style><!--
a{         
 font-family: Arial;
 font-size: .8em;
 text-align:center;
 margin:4px;}
a:link, a:visited{     
 color: #A52310;
 padding:4px 10px 4px 10px;
 background-color: #ecd81c;
 text-decoration: none;
 border-top: 1px solid #EEEEEE;  
 border-left: 1px solid #EEEEEE;
 border-bottom: 1px solid #72221;
 border-right: 1px solid #72221;}
a:hover{        
 color:#831826;   
 padding:5px 8px 3px 12px;    
 background-color:#e2c4c8;   
 border-top: 1px solid #71121;  
 border-left: 1px solid #71121;
 border-bottom: 1px solid #EEEEEE;
 border-right: 1px solid #EEEEEE;}-->
</style>
<body>
<a href="#" _fcksavedurl="#">首页</a>
<a href="#" _fcksavedurl="#">公司简介</a>
<a href="#" _fcksavedurl="#">公司新闻</a>
<a href="#" _fcksavedurl="#">公司动态</a>
<a href="#" _fcksavedurl="#">联系我们</a>
<a href="#" _fcksavedurl="#">论坛</a>
</body>
</html>

【代码分析】

页面body部分与所有HTML页面一样，利用超链接建立最简单的菜单结构。在<head>内

对<a>标签进行整体控制，设置不同状态下的样式，对于鼠标指针经过时的超链接，相应改变
文字颜色、背景色、位置和边框，最终显示效果如图16．2所示。

创建按钮式超链接
【素材及源码下载】