上次在《【CSS】扁平化都是纸老虎，看怎么抛弃前端框架在IE6扁平化》已经提及到扁平化按钮在IE6的实现方案，现在我再给出一种在IE8实现按钮扁平化的悬停的解决方法。悬停属性只能支持到IE8了，IE6它丫不支持我也没有办法了。这种方法我觉得自己的优点是，代码量就5行，然后，由于是纯手写的CSS，兼容绝大部分的浏览器，加载速度也快。具体效果如下图：
基本做到比较好的效果。手写CSS高仿BootStrap。优点比jquery_ui那个按钮的代码量更加简单。
具体的代码如下：
<style> .red_btn{ padding:1em;background:#903030;border:1px solid #dddddd;color:#ffffff;} .red_btn:hover{ background:#c05050;}.blue_btn{ padding:1em;background:#4090c0;border:1px solid #dddddd;color:#ffffff;} .blue_btn:hover{ background:#50c0e0;}.green_btn{padding:1em;background:#309030;border:1px solid #dddddd;color:#ffffff;} .green_btn:hover{ background:#50c050;}</style> 除了实现扁平化的基本属性，padding:1em,border:1px solid #dddddd;以外，悬停与不悬停的颜色变化的思想是这样的，拿红色那个按钮做例子。不悬停的时候它的颜色是#903030，具体大家可以自己调一下，其主色调是R90，G30与B30是它的副色调，在悬停的时候就让它变亮，具体变亮方法是让它的主色调的十六进制首尾增加4，也就从R90变成RC0，其余副色调提高10F，就是最后得出#C05050这种颜色，大致就能实现上面的效果。至于其余颜色也是同样的道理。
，君子无故，玉不去身。
