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>
You can contact me on Twitter.