div按钮CSS

整体效果：

 

HTML：

<div class="sav">
	<span class="left"><div class="btn3"><a href="javascript:void(0)" onclick="thxFriend()">感谢好友</a></div></span>
	<span class="right"><div class="btn"><a href="/activity/2015love/toAddLove.html">表白好友</a></div></span>				
</div>
<div class="sav">
	<div class="btn_tnk"><a href="/activity/2015love/thxList.html">查看接受感谢好友</a></div>
</div>

 

分析： 

一、

 

sav区域为图中深色部分，中间浅色部分为其内两个span间距，黄色阴影为外边距

外层DIV设置width：90%，然后再设置margin-left:5%，即可使其居中

 

二、span

 

外层 DIV sav宽度为90%，里面两个span若都为50%，则其中就没有间距，所以设置每个span为48%，其中左span向左浮动，右span向右浮动

 

三、DIV模拟按钮

外层同样是样式为sav的DIV（黑色阴影部分）。 

 

 

1、按钮都使用DIV模拟

外层一个DIV定位，内层用DIV模拟按钮，如图中下方按钮样式为 btn_tnk，上方按钮样式为btn和btn3

 

2、div设置height/line-height:

height是DIV的高度

line-height是行高

line-height等于height时，可使DIV中字垂直居中

 

 

整体CSS：

<div class="sav">
	<span class="left"><div class="btn3"><a href="javascript:void(0)" onclick="thxFriend()">感谢好友</a></div></span>
	<span class="right"><div class="btn"><a href="/activity/2015love/toAddLove.html">表白好友</a></div></span>				
</div>
<div class="sav">
	<div class="btn_tnk"><a href="/activity/2015love/thxList.html">查看接受感谢好友</a></div>
</div>

总结：
.sav { width: 90%; margin-left: 5%; margin-top: 10px; float: left;}
.sav span.left { width: 48%; float:left;}
.sav span.right { width: 48%; float:right;}

.btn { 
	width: 100%;
	height: 36px;
	line-height: 36px;
	text-align: center;
	background: #fe8855;
	color:#fff;
	font-size: 18px;
	/*border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;*/
	}
.btn a:link, .btn a:visited { color:#fff; text-decoration: none; height: 36px; display: block;}

.btn3 { 
	width: 100%;
	height: 36px;
	line-height: 36px;
	text-align: center;
	background: #7de1bb;
	color:#fff;
	font-size: 18px;
	/*border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;*/
	}
.btn3 a:link, .btn3 a:visited { color:#fff; text-decoration: none; height: 36px; display: block;}

.btn_tnk { 
	width: 100%;
	height: 36px;
	line-height: 36px;
	text-align: center;
	background: #3bca94;
	color:#fff;
	font-size: 18px;
	/*border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;*/
	}
.btn_tnk a:link, .btn_tnk a:visited { color:#fff; text-decoration: none; height: 36px; display: block;}

 。。。

 

评论

1 楼 coosummer 2015-09-15  

可以使用在线按钮样式生成器:http://buttoncssgenerator.com 在线生成按钮css，支持各大主流浏览器，款式随心定制，也有丰富的示例可以选择