Button over Effect

#pillmenu ul {
    float:right;
    padding:0;
    margin:0;
    list-style: none;
}

#pillmenu li {
    float: left;
    margin:0 0 0 4px; list-style: none;
}

#pillmenu li a {
    float:left;
    cursor:pointer; text-decoration:none;
    background: transparent url(images/t_menu_btn.png) no-repeat top right;
}

#pillmenu li a span {
    float:left;
    color: #444;
    font-size:11px;
    font-weight:700;
    font-family: Arial, Verdana, Tahoma, sans-serif;
    text-decoration: none;
    text-transform:uppercase;
    text-shadow:1px 1px #dbdbdb;
    height:50px;
    line-height:26px;
    padding: 0 10px;
    margin:0;
    background: transparent url(images/t_menu_btn_l.png) no-repeat top left;
}

#pillmenu li a:hover,#pillmenu li#current a{
    text-decoration: none;
    background: transparent url(images/t_menu_btn.png) no-repeat bottom right;
}

#pillmenu li a:hover span,#pillmenu li#current a span {
    color:#fff;
    text-shadow:none;
    background: transparent url(images/t_menu_btn_l.png) no-repeat bottom left;
}

And Put This code to your HTML DIV

<div id="pillmenu"> <li><a href="#"><span>nirav panchal</span></a></li></div>