用样式美化button（2）

日期：2013-12-13  来源：攀枝花惠康网络公司

在这个例子中还可以在button中嵌入icon的来增添它的视觉效不美观，篇幅有限就不在这里举例子了。

在css中你会发现此赌暌姑到了position:relative;是为体味决ie和firefox下点击后下沉错位的问题。但在opera下仍是会没解决失踪。还请巨匠多多辅佐。

我们经常使用到a,button,input等标签，经由过程css加布景等体例来实现按钮的效不美观。可是要做一个通用的样式类，又能保证在各个浏览器下默示一致，还能有很好的扩展性的按纽可不就那么轻易了。好了废话少说。进入正题。

首先我们选择a和button两个标签作为通用按纽的外包装器。首要考虑到，在ie6不撑持a以外的:hover谓馓瀣使用a就可以对按钮做悬浮状况，这就是为什么选择他们做为最外层的包装器而不是span或者其他的标签。为什么不用input下面会具体说到。

先来熟悉一下button的类型(type)，button，默认的类型。submit，该可以用来提交表单，功能同<input type=”submit” value=http://www.css88.com/archives/”提交” />。reset，可以用来恢复表单默认值。如下

123456 &lt;form action=""&gt;&lt;input type="text" value="I LOVE CHINA" /&gt;&lt;button type="button"&gt;type="button"，我是一个默认的button,&lt;/button&gt;&lt;button type="submit"&gt;type="submit"，我可以用来提交表单&lt;/button&gt;&lt;button type="reset"&gt;type="reset"，我可以来恢复表单默认值&lt;/button&gt;&lt;/form&gt;

但如不美观想让button在各个浏览器和各类操作系统下默示一致。仍是一件斗劲让人头疼的工作。

之前说了，当button的type属性为submit的时辰，同样可以对表单进行提交，那为什么要选择button,而不是input。原因有两点。

1. 表单中，在css中可以经由过程标签名字来作为选择器，对输入框和按钮进行样式节制，在不撑持css2属性选择器的浏览器中，这点很是主要。
2. 可以在button内甚至可以嵌入div，p这样的标签标签，其扩展性那是相当的好。

在对button断根padding和border之后，ie6，7城市在上内边距发生1个像素的空间，firefox2，3（beta5）则会发生摆布内边距3个像素和上内边距1个像素的空白，opera和safari则不会发生多余的内边距填充。请看图。这些差异给我们美化button上填了良多麻烦。

下面经由过程一个例子来演示一下通用button的建造

Html

1     &lt;button class=&lt;b&gt;&lt;b&gt;有乐趣有乐趣&lt;/b&gt;&lt;/b&gt;&lt;/button&gt;

在这里采用了三层标签的结构，让最内层<b>的布景repeat-x，获得自顺应文字宽度。当然也可以两层标签结构的使用滑动门手艺实现。但如不美观要通用的话，那滑动门的布景至少要有800px的宽（考虑到宽屏，文字长等情形）

Images

左边圆角

中心一再布景

右边圆角

在建造的过程中，也许会问，为什么不将三张合成一张布景，其适ё侪因就是膳缦沔提到的。每个浏览器下对button标签的默认内间距诠释的都纷歧样。所以只能经由过程布景垂直居中的体例来解决三张图片对齐的问题。

CSS

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647     .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/span>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:background:#FFD8D3 url("../img/yn_btn_pink_center.gif") left repeat-x;_background-color:#FFF;}