GMail-like buttons

gistfile1.html

<!--
GMail-style buttons
/via http://gregbabula.com/
-->
<style>
a {
    font: 12px/12px "Helvetica Neue", Helvetica, sans-serif;
    border-top: 1px solid #eee;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #fff;
    background-image:-moz-linear-gradient(100% 100% 90deg, #e0e0e0, #fff);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e0e0e0));
    float: left;
    display: block;
    color: #000;
    text-decoration: none;
    outline: none;
}
a span {
    float: left;
    height: 8px;
    border-bottom: 3px solid rgba(221,221,221,0.5);
    padding:5px;
    font-style: normal;
}
.buttons a:first-child {
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    border-left:1px solid #ccc;
}
.buttons a:last-child {
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}
a:hover, a:focus {
    border-top-color: #eee;
    border-right-color: #bbb;
    border-bottom-color: #bbb;
    border-left-color: #eee;
}
a:active span{
    top:1px;
    position:relative;
}
.buttons {
    clear: both;
}
</style>
<div class="buttons">
    <a href="#"><span>First btn</span></a>
    <a href="#"><span>Middle</span></a>
    <a href="#"><span>Middle</span></a>
    <a href="#"><span>Last btn</span></a>
</div>

test @ http://jsfiddle.net/zerolab/TrnDh/