html tutorial - How to animate background-color of an element on mouse hover using CSS - html5 - html code - html form




Answer: Use the CSS3 transition property

Using the CSS3 transition property it make smoothly to animate the background-color in part on mousehover, like a hyperlink.

Example

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>CSS Smooth Background Color Transition</title>
    <style type="text/css">
        a {
            color: #fff;
            border: none;
            padding: 10px 20px;
            display: inline-block;
            text-decoration: none;
            font: bold 18px sans-serif;
            background: #fd7c2a;
            -webkit-transition: background 2s; /* For Safari 3.0 to 6.0 */
            transition: background 5s; /* For modern browsers */
        }
        a:hover {
            background: #3cc16e;
        }
    </style>
    </head>
    <body>
        <p><a href="#">Hover on me</a></p>
    </body>
    </html>

    Related Searches to How to animate background-color of an element on mouse hover using CSS