CSS3: Animated button using transition on mouse hover

This entry is part 5 of 13 in the series CSS3

Here we show a transition of a link button changing its color from gray to black.

The color that we want to transition to is on the :hover.

Without setting the transition effect, it will change to black immediately.

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>CSS Transistions</title>
        a {
            background: gray;
            border-radius: 5px;
            display: block;
            float: left;
            padding: 5px;
            text-align: center;
            width: 125px;
            -webkit-transition: all 1s ease-in;
            -moz-transition: all 1s ease-in;
            -o-transition: all 1s ease-in;
            transition: all 1s ease-in;

        a:hover {
            background: black;
            color: white;

<a href='//yahoo.com'>Link to Yahoo</a>


The key piece of CSS is transition: all 1s ease-in.  With this line, the browser will animate all the properties (background and color) to use the ease-in timing function.

The total time of transition is 1 second.

Series Navigation<< CSS3: Designing buttons with attributes
CSS3: Animated image zoom on mouse hover >>