Tab Switchers

by dannygarcia

HTML

<div class="tabwrap">
    <a class="action" href="#">Firm Details</a>
    <a class="action" href="#">Portfolio <span>32</span></a>
    <a class="action" href="#">Key Personnel <span>17</span></a>
</div>

CSS

* {font-family: Helvetica, Arial, sans-serif; font-weight:bold;}
body {background-color:#F5F5F5;}
a.action span {
    border: 1px solid #999;
    border-radius: 3px;
    padding: 1px 3px 0px;
    
    background: #eeeeee; /* old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* ie */
}

a.action {
    display: block;
    float: left;
    height: 35px;
    padding: 0 15px;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
    text-shadow: rgba(255, 255, 255, 0.9) 0px 1px 0px;
    line-height: 37px;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: #B3B3B3;
    
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  
    background: #ffffff; /* old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* ie */

    -webkit-transition-property: border-color, -webkit-box-shadow, background;
    -webkit-transition-duration: 0.1s;
    -webkit-transition-timing-function: ease;
}

a.action:first-child {
    border-left:2px solid;
    border-color: #B3B3B3;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
a.action:last-child {
    border-right:2px solid;
    border-color: #B3B3B3;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* HOVER */

a.action:hover {
    border-color: #33b2e1;
    -webkit-box-shadow: 0px 0px 3px #33b2e1;
    
    background: #ffffff; /* old...