【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這種顔色，大緻就能實作上面的效果。至于其餘顔色也是同樣的道理。