css+div自适应宽度圆角按钮

之前在介绍CSS sprites的时候提到了自适应宽度的圆角按钮，这个按钮实际应用还是很广泛的，所以我再次也给大家介绍一下。首先请大家看一下这个例子，就是按钮的宽度会根据文字的多少变化，鼠标滑过会有变化效果。

http://www.iscss.tk/demo/key/key.html

我们做这个效果需要的是这样一张图片，上边一半是他正常效果，下边一半是滑过时的效果。这里只是在划过的时候颜色变浅。

html如下：

<a target=”_blank” href=”http://iscss.tk/“><span>iscss.tk</span></a>

css如下：

.iscssKey{ float:left; height:22px; background:url(http://www.iscss.tk/wp-content/uploads/2010/09/iscssKey.gif) left 0 no-repeat; color:#FFF; font-size:12px;}
.iscssKey span{ float:left; height:22px; line-height:22px; background:url(http://www.iscss.tk/wp-content/uploads/2010/09/iscssKey.gif) right -22px no-repeat; margin-left:10px; padding-right:10px; display:inline; cursor:pointer;}
.iscssKey:hover{ background-position:left -44px;}
.iscssKey:hover span{ background-position:right -66px;}

为什么我们的a标签里边要放入一个span呢？我们的自适应宽度就是靠他了，原理就是：

a标签从背景左对齐，构建出了按钮的左侧圆角。

span标签背景右对齐，就构建出了按钮右侧的圆角，相互叠加就形成了我们想要的自适应宽度圆角按钮。

至于滑过的效果，我想大家都会做了。只是当鼠标划上iscss.tk文字时，在hover处定义了一下背景图片的位置而已。

这种方法是最常用的一种，但是也存在着一个问题，如果按钮特别长，大于了我们背景图片的两个宽，那我们的按钮就露馅了~呵呵。不过一般应用下，我们都能控制按钮的一个大致宽度区间，所以这一点不用担心，如果你需要的比较宽，就把背景图片做宽一点，如果特别宽，跟一个标题栏一样了，那你还是使用三张图片平铺的方法吧（那么长好像也不叫按钮了，没人会做那么长的吧~呵呵）

好啦，这个圆角按钮就给大家介绍到这里吧，希望大家多多支持我哦。

 

 

 

文章作者：IceSun
本文地址：http://www.iscss.tk/?p=46
版权所有 © 转载时必须以链接形式注明作者和原始出处！