当前位置:软件学堂 > 资讯首页 > 网络编程 > DIV+CSS > css创建按钮式超链接

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所示。

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

请点击:css创建按钮式超链接 下载本实例相关素材及源码

 

标签: 按钮