icon btn

icon btn

by pleasureswx123

HTML

<link rel="stylesheet" href="http://baike.so.com/resource/css/mod/common/ico.css">
<link rel="stylesheet" href="http://baike.so.com/resource/css/mod/base/base.css">
<div class="box">
	<div class="inner-box">
		<h2>等级图标</h2>
		<p><span class="ico-lev ico-lev1"></span><span class="ico-lev ico-gray-lev1"></span></p>
		<p><span class="ico-lev ico-lev2"></span><span class="ico-lev ico-gray-lev2"></span></p>
		<p><span class="ico-lev ico-lev3"></span><span class="ico-lev ico-gray-lev3"></span></p>
		<p><span class="ico-lev ico-lev4"></span><span class="ico-lev ico-gray-lev4"></span></p>
		<p><span class="ico-lev ico-lev5"></span><span class="ico-lev ico-gray-lev5"></span></p>
		<p><span class="ico-lev ico-lev6"></span><span class="ico-lev ico-gray-lev6"></span></p>
		<p><span class="ico-lev ico-lev7"></span><span class="ico-lev ico-gray-lev7"></span></p>
		<p><span class="ico-lev ico-lev8"></span><span class="ico-lev ico-gray-lev8"></span></p>
		<p><span class="ico-lev ico-lev9"></span><span class="ico-lev ico-gray-lev9"></span></p>
		<p><span class="ico-lev ico-lev10"></span><span class="ico-lev ico-gray-lev10"></span></p>
	</div>
	<div class="inner-box">
		<h2>零碎图标</h2>
		<p><span class="ico-edit"></span></p>
		<p><span class="ico-lock"></span></p>
		<p><span class="change"></span></p>
		<p><span class="ico-money"></span></p>
		<p><span class="icon-checkmark"></span></p>
	</div>
	<div class="inner-box">
		<h2>零碎的按钮</h2>
        <p>a标签</p>
		<p>
			<a class="btn-green12" href="">xxx</a>
			<a class="btn-gray12" href="">xxx</a>
		</p>
        <p>
			<a class="btn-green14" href="">xxx</a>
			<a class="btn-gray14" href="">xxx</a>
		</p>
        <p>
			<a class="btn-green16" href="">xxx</a>
			<a class="btn-gray16" href="">xxx</a>
		</p>
        <p>button标签</p>
		<p>
			<button class="btn-green12" href="">xxx</button>
			<button class="btn-gray12" href="">xxx</button>
		</p>
        <p>
			<button class="btn-green14" href="">xxx</button>
			<button class="btn-gray14"...

CSS

.box {
	width: 800px;
	margin: 20px auto;
	padding: 20px;
	border: 1px solid #eee;
}
.box p {
	padding: 5px;
}
.inner-box {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	width: 33%;
	vertical-align: top;
}
h2 {
	color: #999;
	height: 30px;
	font:16px/30px '\5FAE\8F6F\96C5\9ED1', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	padding: 0 5px;
}
h3 {
	font-size: 12px;
	margin: 10px -20px -20px;
	padding: 10px 20px;
	background: #eee;
}