CSS transitions for hover states

Just messing around using CSS transitions for button hover states. For this type of thing, this is a much nicer approach then using JavaScript. Its very simple, and gives the power back to the designer.

Demo

CSS & HTML

button {
	padding:6px;
	background: #6666cc;
	
	-webkit-transition: 0.2s all ease;
	-moz-transition: 0.2s all ease;
   	-ms-transition: 0.2s all ease;
       transition: 0.2s all ease;
}
button:hover {
	background: #7777ee;
	padding: 6px 25px;
}
button.red {
	background: #cc7777;
}
button.red:hover {
	background: #ee7777;
}
<button>save</button><button class="red">delete</button>