Create nice interlocking CSS buttons

[egogmail]

Create nice interlocking CSS buttons.

Download related images: http://www.creativetoday.com/download/image.zip

CSS:

Code:

#Tabs{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    list-style: none;
    font-weight: bold;
    margin: 0 auto 0;
    padding: 5px 13px 6px 0;
    float: left;
    font-size: 85%;
}

#Tabs li{
    padding: 0;
    margin: 0;
    float: left;
    background: url(TabTL.png) top left repeat-x;
}

#Tabs a{
    background: url(TabTR.png) top right no-repeat;
    padding: 5px 30px 6px 8px;
    float: left;
    color: #fff;
    text-align: center;
    text-decoration:none;
}

#Tabs li.Active{
    background: url(TabATL.png) top left repeat-x;
}

#Tabs li.Active a{
    color: #005C7D;
    background: url(TabATR.png) top right no-repeat;
    text-decoration:none;
}
#Tabs li.First{
    border-left: 1px solid;
    padding-left: 8px;
}
#Tabs li.Last a{
    background: url(TabTRLast.png) top right no-repeat;
}
#Tabs li.BeforeActive a{
    background: url(TabBeforeATR.png) top right no-repeat;
}
#Tabs li.ActiveLast a{
    background: url(TabATRLast.png) top right no-repeat;
}

HTML

Code:

<ul id="Tabs">
            <li class="First Active"><a href="#">Home</a></li>
            <li class=""><a href="#.html">About</a></li>
            <li class="Last"><a href="#.html">Contact</a></li>
        </ul>

Goodluck...

EGO