首页 > 代码库 > <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样式: