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>

Tagged:

Web Development, HTML, CSS

You can contact me on Twitter.

Recent & Popular Articles

Browse All >