制作Google Reader风格的按钮

用了很久的Google Reader,发现它的按钮很好看(如下图),而且圆角和渐变效果的处理方式也值得学习一下。

一,实现圆角效果

这里的圆角是用border来模拟出来的,把图片放大之后就可以看到其中的奥秘。

分析一下,要实现这种效果,就得用两个div嵌套实现。

<div class="btn-outer">
	<div class="btn-inner">
		HELLO WORLD
	</div>
</div>

里面的div负责上下的边框,外面的div负责左右的边框,并且左右的边框分别往外扩张一个象素,用负边距可以实现这样的效果。为了实现自适应内容的宽度,这两个div必须浮动,CSS如下:

.btn-outer, .btn-inner {
	float: left;
	border-color: #ccc;
}
.btn-outer {
	border-width: 1px 0;
	border-style: solid none;
}
.btn-inner {
	margin: 0 -1px;
	border-width: 0 1px;
	border-style: none solid;
	position: relative;
}

.btn-inner里面的position: relative是为了修复IE6的BUG,如果不加这个,在IE6下面左右两个边框会消失掉。

二,实现渐变效果

圆角做好之后,接下来制作button的背景,这里的背景是个渐变的效果。Google的做法是加多一个div,并用这个div的背景色和下边框色来模拟渐变的效果。改动一下上面的HTML:

<div class="btn-outer">
	<div class="btn-inner">
		<div class="btn-top-shadow"></div>
		<div class="btn-content">HELLO WORLD</div>
	</div>
</div>

接下来改动CSS为:

.btn-outer, .btn-inner {
	float: left;
	border-color: #ccc;
}
.btn-outer {
	border-width: 1px 0;
	border-style: solid none;
}
.btn-inner {
	font-size: 24px;
	line-height: 1.4em;
	color: #333333;
	margin: 0 -1px;
	border-width: 0 1px;
	border-style: none solid;
	position: relative;			
	background: #E3E3E3;
	overflow: hidden;
}
.btn-top-shadow {				
	border-bottom: 0.1em solid #EEEEEE;
	height: 0.7em;
	width: 100%;
	background: #F9F9F9;
	position: absolute;
	overflow: hidden;
}
.btn-content {
	position: relative;
	padding: 0 4px;
}

其中.btn-inner和.btn-top-shadow的overflow: hidden是为了修复IE6的BUG。可以看出用.btn-inner和.btn-top-shadow的背景色,以及.btn-top-shadow的下边框色就可以实现出渐变。

DEMO

制作Google Reader风格的按钮》上有1条评论

发表评论