Apple.com Style Button

by kizer

HTML

<a class="button" href="">Buy Apple</a>

CSS

body {
    padding: 20px;
}

a.button {
            background: -webkit-gradient(linear, left top, left bottom, from(#50A7E7), to(#3679CF));
            background: -moz-linear-gradient(top,  #50A7E7,  #3679CF);
            -moz-border-radius: 15px;
            border-radius: 15px;
            border: 1px solid #4081AF;
            font: 12px/100% 'Lucida Grande';
            padding: 4px 15px;
            -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.3) inset, 0 1px 1px rgba(0,0,0,.2);
            -moz-box-shadow: 0 1px 1px rgba(255,255,255,.3) inset, 0 1px 1px rgba(0,0,0,.2);
            color: #fff;
            text-shadow: 0 1px 0 rgba(0,0,0,.5);
            cursor: pointer;
            text-decoration: none;
        }
        
        a.button:hover {
            background: -webkit-gradient(linear, left top, left bottom, from(#51A8E7), to(#206BCB));
            background: -moz-linear-gradient(top,  #51A8E7,  #206BCB);
            -webkit-box-shadow: 0 1px 1px rgba(255,255,255,.2) inset, 0 1px 1px rgba(0,0,0,.1);
            -moz-box-shadow: 0 1px 1px rgba(255,255,255,.2) inset, 0 1px 1px rgba(0,0,0,.1);
        }
        
        a.button:active {
            -webkit-box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
            -moz-box-shadow: 0 0 10px rgba(0,0,0,.3) inset;
            text-shadow: 0 -1px 0 rgba(0,0,0,.9);
        }