Awesome Rounded corner css hover button with single background image

Here is a simple Rounded corner css navigation button.

1)Add background image
download below jpg image to your images folder.



2)Add html code
Add below html code to your web page where you want to show the navigation bar

<ul class="nav">
<li><a href="#"><span> Home </span></a></li>
<li><a href="#"><span> Our Services </span></a></li>
<li><a href="#"><span> Sitemap </span></a></li>
<li><a href="#"><span> Contact Us </span></a> </li>
</ul>

3)Add CSS Styles
Add below css styles to your stylesheet files or to your html page

ul.nav{
padding:0;
margin:0;
}
ul.nav li{
float:left;
list-style-type:none;
margin-left:5px;
}
ul.nav li a:link,ul.nav li a:visited{
text-decoration:none;
font-weight:bold;
font-size:14px;
color:#669933;
height:35px;
display:block;
padding-left:15px;
cursor:pointer;
float:left;

}
ul.nav li a:hover{
text-decoration:none;
font-weight:bold;
font-size:14px;
color:#FFFFFF;
background:url(images/nag_bg.jpg) no-repeat;
}
ul.nav li a:hover span{
background:url(images/nag_bg.jpg) no-repeat right;
}
ul.nav li span{
display:block;
height:35px;
padding-right:15px;
line-height:30px;
float:left;
}

download zip file