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>

普通样式：

<a>按钮样式

hover样式：

<a>按钮样式