Rounded corner css button with single background image

Here is a simple method to make the rounded corner button for navigation using css



Demo
______________________________________________

• Home
• Our Services
• Contact Us

______________________________________________

Follow below description to add these type navigation to your website:

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



2)Add html code
followin is the html code of navigation bar. just add this 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