【CSS】一种不用插件纯手写css的扁平化按钮悬停颜色变化的讨论

上次在《【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这种颜色，大致就能实现上面的效果。至于其余颜色也是同样的道理。