最近看了张鑫旭老师关于Google搜索按钮的博客，感觉启示颇多。下面我就详说一下这个按钮的代码，由于W3C新版本的更新，之前的代码会有部分累赘，
在此，我做了些修改。当然，想观摩原版的可以，狠狠的戳链接啦！http://www.zhangxinxu.com/wordpress/?p=292
好了，那现在，我们先看一下这个按钮的代码
CSS代码：
以下是HTML代码：
以下是显示结果：
下面，我们来解析一下代码
首先，我们最外层的p标签，只是为了演示 本按钮 可以进行图文混编，这个不是必要的，大家要清楚
其次，内层的超链接 .g_a ，将其定义为内联块级元素，这样是赋予行级标签a宽高等属性。然后，设置他的边框及圆
角，附上背景色，并消除超链接的默认样式。接着，让其超出部分隐藏，因为内部的的span标签都设置为块级属性了，所
以隐藏掉超出部分。这里vertical-align: middle;的作用是演示图文混编，让其与文字居中显示的，非必须代码。
最后，对于第一个span标签.g_b ，他的作用就是产生高亮效果，大家可以给他加一个背景色，看看他的所属位置，
也可以，放大按钮观察，竖直方向按钮的颜色变化是.g_b的背景色，.g_b的边框，然后是a标签的背景色
而，第二个span标签.g_c ，他是为按钮添加文字的，而且padding: 0.1em 0.6em; margin-top: -0.6em;的目的
是使文字近乎于居中显示，此时.g_c的大小使几乎充满整个a标签的，通过.g_c的行高和宽度撑起整个a标签的空间，而且
所有span标签均使用 em （他是相对大小单位，默认为浏览器的字体大小）的倍数，可以实现按钮宽高的自适用。
cursor: pointer;仅仅是让鼠标显示小手形状，不加也行，超链接默认就是此图形。
此按钮的优点：
1.可以与文字混排，对vertical-align属性敏感
2.宽度自适应于内部文字的个数，高度自适应于内部文字的大小
3.支持用css实现鼠标经过样式改变
4.页面性能提成，开发维护成本降低
好啦，以上就是我修改之后的按钮代码，我自认道行还浅，若有什么错误，还请指出，我们共同交流