htmlやbody、div、buttonなどの要素の背景色をスムーズに変化させることができます。実装は、jQuery、jQuery-uiとanimated_bg.jsを読込んでおき、scriptで要素ごとに変化させる色と表示スピードをセットします。
次に、CSSでアニメーションの最初の色と同じになるように要素の背景色を指定します。 Javascriptが失敗した場合には、CSSの背景色プロパティにフォールバックします。
 $('.animated_bg2').animatedBG({
	 colorSet: ['#abebfe', '#aad667', '#57e6ee', '#ff7ebb'],
	 speed: 2000
 });

ボタンサンプル

.animated_bg2

.animated_bg3

※参照元:http://webdesignerwall.com/tutorials/animating-background-colors
戻るボタン