Create a menu with hover background fade effect using css3 transition

This article looks at creating a nice fading background hover effect for a navigation menu or button using CSS3 transition. 

CSS3 Transition Explained

CSS3 transitions allow you to change from one style to the next over an assigned period of time. To create a transition you need to define the CSS property that you want to add an effect to, and the amount of time the property will take to change in seconds. You then set the new value for the property that will change on a selector. This is best demonstrated with an example...

HTML

First we'll setup a simple navigation menu using list items:

<ul class="nav">
    <li><a href='/'>Home</a></li>
    <li><a href='/'>Blog</a></li>
    <li><a href='/'>About</a></li>
    <li><a href='/'>Contact</a></li>
</ul>

CSS

Next we add the transition property to the anchor tag, and then use the standard hover selector to change the background color:

.nav li
{
    display:inline-block;
}

.nav li a
{
    display:block;
    padding: 10px 20px;
    color:#000;
    border-radius2px;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -ms-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}

.nav li a:hover
{
    background-color: #FF3838;
    color:#fff;
}

 

Demo

Sign Up

NEXT: Create a zebra striped table with CSS3

How to create a simple zebra striped table using CSS3's nth-child selector.

comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.