欢迎来到.net学习网

欢迎联系站长一起更新本网站!QQ:879621940

您当前所在位置:首页 » Html » 正文

热门阅读

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

创建时间:2011年10月31日 11:06  阅读次数:(6005)
分享到:
因为有些功能是链接不能实现的,而有些功能按钮实现起来又麻烦。所以在项目的导航中想放入统一的链接或者按钮来实现全部功能是很麻烦的事情,所以我们就有了将按钮伪装成链接样式的需求。

网上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 >
顣槝 峇 Rd栧?R0_N/f
来源:
说明:所有来源为 .net学习网的文章均为原创,如有转载,请在转载处标注本页地址,谢谢!
【编辑:Wyf

打赏

取消

感谢您的支持,我会做的更好!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

最新评论

共有评论0条
  • 暂无任何评论,请留下您对本文章的看法,共同参入讨论!
发表评论:
留言人:
内  容:
请输入问题 89+14=? 的结果(结果是:103)
结  果: