返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

利用CSS把网站按钮伪装成超链接

时间:2017-02-10 23:08来源:电脑教程学习网 www.etwiki.cn 编辑:admin

因为有些功能是链接不能实现的,而有些功能按钮实现起来又麻烦。所以在项目的导航中想放入统一的链接或者按钮来实现全部功能是很麻烦的事情,所以我们就有了将按钮伪装成链接样式的需求。

网上Copy了一个,以下是代码,效果还是不错。


<!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=gb2312" / >
<title >无标题文档</title >
<style type="text/css" >
body {
font-family: "Verdana" sans-serif;
}
a:link,
a:visited {
color: blue;
}
a:hover,
a:focus,
a:active {
color: black;
}
button {
overflow: visible;
width: auto;
}
button.link {
font-family: "Verdana" sans-serif;
font-size: 1em;
text-align: left;
color: black;
background: none;
margin: 0;
padding: 0;
border: none;
cursor: pointer;
}
-moz-user-select: text;
button.link span {
text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
color: blue;
}
</style >
</head >

<body >
<form action="#" method="post" >
<p ><button type="submit" class="link" ><span >I am a button</span ></button ></p >
</form >

<p ><a href="#" >That's nice, I am a link</a ></p >
</body >
</html >

------分隔线----------------------------
标签(Tag):css
------分隔线----------------------------
推荐内容
猜你感兴趣