首页 > 代码库 > <a>按钮样式
<a>按钮样式
网页上有很多功能是通过链接方式传递参数,这种功能链接普通样式就是一个超链接 退出,如果将超链接的样式变成按钮样式,给用户的感觉会更好。
一种方法是给a标签添加display:block的样式,并添加hover样式。
<style type="text/css">div.container{width: 600px;/*height: 200px;*/border-bottom: 2px solid green;padding: 10px;}.container a,.container a:link,.container a:visited{display: block;float: left;margin-right: 5px;background: #ED2B34;padding: 5px;text-decoration: none;font-size: 12px;font-family: ‘宋体‘;color:#fff;}.container a:hover{display: block;float: left;margin-right: 5px;background: #C30A13;padding: 5px;text-decoration: none;font-size: 12px;font-family: ‘宋体‘;color:#ccc;}.clear{clear: both}</style><div class=‘container‘><p>微信公众平台开发(2)扫描二维码添加公众账号</p><a href="http://www.cnblogs.com/birdskyws/p/3912719.html">跳转链接1</a><a href="http://www.cnblogs.com/birdskyws/p/3910493.html">跳转链接2</a><div class="clear"></div></div>
普通样式:
hover样式:
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。