码迷,mamicode.com
首页 > 其他好文 > 详细

<a>按钮样式

时间:2014-08-15 12:26:48      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   ar   2014   div   

网页上有很多功能是通过链接方式传递参数,这种功能链接普通样式就是一个超链接 退出,如果将超链接的样式变成按钮样式,给用户的感觉会更好。

一种方法是给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>

 

普通样式:

bubuko.com,布布扣

hover样式:

bubuko.com,布布扣

 

<a>按钮样式,布布扣,bubuko.com

<a>按钮样式

标签:style   blog   http   color   io   ar   2014   div   

原文地址:http://www.cnblogs.com/birdskyws/p/3914472.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!