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'>
<head>
    <meta charset='utf-8'>
    <title>CSS Transistions</title>
    <style>
        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;
        }
    </style>
</head>
<body>

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

</body>
</html>

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 >>