关于Google 圆角 高光 高宽 自适应 按钮

　　最近看了张鑫旭老师关于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.页面性能提成，开发维护成本降低

 

　　　　好啦，以上就是我修改之后的按钮代码，我自认道行还浅，若有什么错误，还请指出，我们共同交流