Modern button

by Reusablecode

HTML

<a href="#"><span>Subscribe for $20/year</span></a>
<a href="#"><span>Login</span></a>
<a href="#"><span>Create a new fiddle</span></a>

CSS

body {
    font-family: 'Lucida Grande';
    font-size: 12px;
}

a {
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    color: #fff;
    float: left;
    margin-right: 10px;
    font-weight: bold;
}

a {
    display: block;
    border: solid 1px #3C5222;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    background: -webkit-gradient(
        linear,
        0 0,
        0 100%,
        color-stop(0, #7CB93E),
        color-stop(1, #598C28)
    );
    background: -moz-linear-gradient(
        center top,
        #7CB93E 0,
        #598C28 100%
    );
}

a span {
    display: block;
    padding: 10px 10px 10px 33px;
    border-top: solid 1px rgba(255, 255, 255, 0.35);
    background: url(http://img576.imageshack.us/img576/4997/butttt.png) 10px 50% no-repeat;
}

a:active {
    background: -webkit-gradient(
        linear,
        0 0,
        0 100%,
        color-stop(0, #598C28),
        color-stop(1, #477020)
    );
    background: -moz-linear-gradient(
        center top,
        #598C28 0,
        #477020 100%
    );
}

a:active span {
    border-top: solid 1px rgba(0, 0, 0, 0.2);
}