CSS transitions for hover states
- Wed Aug 15, 2012
- Tyler Egeto, tyleregeto@gmail
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>
This entry has no comments.