Page Widget How to - Add hover animation to menu item

Question

We would like to know how to add hover animation to menu item.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#main {<!-- w  w w . java 2  s .co m-->
    width: 64em;
    height: 25em;
}

#menu {
    background-color: #EEE;
    height: 3em;
}

.buttons {
    text-decoration: none;
    color: black;
    line-height: 3em;
    display: block;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}

.buttons:hover {
    background-color: #0d96d6;
}
</style>
</head>
<body>
    <div id="main">
        <div id="menu">
            <a href="#" class="buttons">Home</a> 
            <a href="#" class="buttons">About Us</a> 
            <a href="#" class="buttons">Pictures</a> 
            <a href="#" class="buttons">Contact Us</a>
        </div>
    </div>
</body>
</html>

The code above is rendered as follows: