css3带动画效果的漂亮的按钮

用IE9及以下版本的朋友就不用看了，你懂得.
/*Common styles for buttons*/
.button {
		background-image: linear-gradient(
		rgba(255,255,255,0.6), 
		rgba(0,0,0,0.6)
	);
	
	display: inline-block;
	height: 70px; width: 120px;
	line-height: 70px; /*Same as height*/
	margin: 5px;
	
	color: white;
	font-size: 12px;
	font-weight: bold;
	
	border-radius: 5px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

#rgb {
	background-color: #FF0; /*yellow*/
	animation: rgb 3s infinite alternate;
}
@keyframes rgb {
	/* 0% will fallback to the default background-color of #rgb*/
	50% {background-color: #06F; /*blue*/ }
	100% {background-color: #F00; /*red*/}
}

#namedcolors {
	background-color: red;
	animation: namedcolors 0.3s infinite alternate;
}
@keyframes namedcolors {
	100% {background-color: orange;}
}

#hue {
	background-color: hsl(0, 100%, 50%); /*red*/
	animation: hue 3s infinite alternate;
}
@keyframes hue {
	/*hue will animate from 0 to 360. Saturation and Lightness remain constant*/
	20% {background-color: hsl(72, 100%, 50%);}
	40% {background-color: hsl(144, 100%, 50%);}
	60% {background-color: hsl(216, 100%, 50%);}
	80% {background-color: hsl(288, 100%, 50%);}
	100% {background-color: hsl(360, 100%, 50%);}
}

#saturation {
	/*0% saturated red = grey*/
	background-color: hsl(0, 0%, 50%); 
	animation: saturation 3s infinite alternate;
}
@keyframes saturation {
	/*100% saturated red*/
	100% {background-color: hsl(0, 100%, 50%); }
}

#lightness {
	/*0% lightness = black*/
	background-color: hsl(0, 100%, 0%); 
	animation: lightness 3s infinite alternate;
}
@keyframes lightness {
	/*50% lightness = red*/
	50% {background-color: hsl(0, 100%, 50%); }
	/*100% lightness = white*/
	100% {background-color: hsl(0, 100%, 100%); }
}

/*animating gradients to flat colors - a bit complex*/
#topflat {
	color: #999;
	/*a transparent-black gradient above white base, making it a white-black gradient*/
	background-color: white;
	background-image: linear-gradient(rgba(0, 0, 0, 0), black);
	animation: topflat 3s infinite alternate;
}
@keyframes topflat {
	100% {background-color: black;}
}

#bottomflat {
	color: #999;
	/*a white-transparent gradient above black base, making it a white-black gradient*/
	background-color: black;
	background-image: linear-gradient(white, rgba(255, 255, 255, 0));
	animation: bottomflat 3s infinite alternate;
}
@keyframes bottomflat {
	100% {background-color: white;}
}