制作良好扩展性的通用Button
我们经常使用到a,button,input等标签,通过css加背景等方式来实现按钮的效果。但是要做一个通用的样式类,又能保证在各个浏览器下表现一致,还能有很好的扩展性的按纽可不就那么容易了。
我们经常使用到a,button,input等标签,通过css加背景等方式来实现按钮的效果。但是要做一个通用的样式类,又能保证在各个浏览器下表现一致,还能有很好的扩展性的按纽可不就那么容易了。好了废话少说。进入正题。
首先我们选择a和button两个标签作为通用按纽的外包装器。主要考虑到,在ie6不支持a以外的:hover伪类,使用a就可以对按钮做悬浮状态,这就是为什么选择他们做为最外层的包装器而不是span或者其他的标签。为什么不用input下面会详细说到。
先来认识一下button的类型(type),button,默认的类型。submit,该可以用来提交表单,功能同<input type=”submit” value=”提交” />。reset,可以用来恢复表单默认值。如下
<form action=""> <input type="text" value="I LOVE CHINA" /> <button type="button">type="button",我是一个默认的button,</button> <button type="submit">type="submit",我可以用来提交表单</button> <button type="reset">type="reset",我可以来恢复表单默认值</button> </form>type=”button”,我是一个默认的button,
type=”submit”,我可以用来提交表单
type=”reset”,我可以来恢复表单默认值
之前说了,当button的type属性为submit的时候,同样可以对表单进行提交,那为什么要选择button,而不是input。原因有两点。
- 表单中,在css中可以通过标签名字来作为选择器,对输入框和按钮进行样式控制,在不支持css2属性选择器的浏览器中,这点非常重要。
- 可以在button内甚至可以嵌入div,p这样的标签标签,其扩展性那是相当的好。
但如果想让button在各个浏览器和各种操作系统下表现一致。还是一件比较让人头疼的事情。
在对button清除padding和border之后,ie6,7都会在上内边距产生1个像素的空间,firefox2,3(beta5)则会产生左右内边距3个像素和上内边距1个像素的空白,opera和safari则不会产生多余的内边距填充。请看图。这些差异给我们美化button上填了很多麻烦。
下面通过一个例子来演示一下通用button的制作
Html
<button class="btn btn-style-1" type="submit"><b><b>有兴趣有兴趣</b></b></button>
在这里采用了三层标签的结构,让最内层<b>的背景repeat-x,得到自适应文字宽度。当然也可以两层标签结构的使用滑动门技术实现。但如果要通用的话,那滑动门的背景至少要有800px的宽(考虑到宽屏,文字长等情况)
Images
左边圆角
中间重复背景
右边圆角
在制作的过程中,也许会问,为什么不将三张合成一张背景,其实原因就是上面提到的。每个浏览器下对button标签的默认内间距解释的都不一样。所以只能通过背景垂直居中的方式来解决三张图片对齐的问题。
CSS
.btn{ display:inline-block; display:-moz-inline-stack; *display:inline; zoom:1; margin:0; border:0; padding:0 5px 0 0; text-align:center; font-family:"微软雅黑",YaHei,"黑体"; vertical-align:middle; font-size:0.8em; color:#000; text-decoration:none; background:url("../img/yn_btn_pink_right.gif") right no-repeat; } button.btn{ cursor:pointer; width:auto; *overflow:visible; border:0 none; background-color:none; vertical-align:middle; } .btn b{ display:inline-block; display:-moz-inline-stack; *display:inline; zoom:1; padding:0 0 0 5px; position:relative; white-space:nowrap; font-weight:normal; height:22px; line-height:22px; background:#FFD8D3 url("../img/yn_btn_pink_left.gif") left no-repeat; _background-color:#FFF; } button.btn b b{ _margin-top:1px; padding:0px 8px; height:22px; line-height:22px; cursor:pointer; background:#FFD8D3 url("../img/yn_btn_pink_center.gif") left repeat-x; _background-color:#FFF; }
在css中你会发现其中用到了position:relative;是为了解决ie和firefox下点击后下沉错位的问题。但在opera下还是会没解决掉。还请大家多多帮忙。
在这个例子中还可以在button中嵌入icon的来增加它的视觉效果,篇幅有限就不在这里举例子了。
相关阅读:
http://www.designdetector.com/demos/buttons-padding-demo.html