OS X Lion Buttons in Pure CSS3

lion_buttons.css

/*

    <a href="#" class="ok buttons">OK</a>
    
    <a href="#" class="cancel buttons">Cancel</a>
    
    <a href="#" class="inactive buttons">Inactive</a>
    
    <a href="#" class="small buttons">Small</a>

*/


a.buttons {
    display: inline-block;
    padding: 0 33px;
    height: 19px;
    line-height: 19px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -moz-border-radius: 3px;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    font-family: "Lucida Grande", lucida, "Helvetica Neue", helvetica, sans-serif;
    font-size: 12px;
    color: #000;
    text-shadow: 0 1px 0 rgba(255,255,255,0.09);
}

@-webkit-keyframes blinking {
   from {
       -webkit-box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
        }
   50% {
       -webkit-box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0.2), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
        }
    to {
       -webkit-box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
        }
    }
    
    @-moz-keyframes blinking {
   from {
       -moz-box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
        }
   50% {
       -moz-box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0.2), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
        }
    to {
       -moz-box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
        }
    }
    
    @keyframes blinking {
   from {
       box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
        }
   50% {
       box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0.2), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
        }
    to {
       box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
        }
    }

a.buttons.ok {
    border-top-color: #5a5caf;
    border-bottom-color: #52536f;
    border-left-color: #56578f;
    border-right-color: #56578f;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #D3F7FD),
        color-stop(0.5, #87C5FB),
        color-stop(0.5, #A1D1F9),
        color-stop(1, #D4E9FC)
        );
    background-image: -moz-linear-gradient(
        center bottom,
        #D3F7FD 0%,
        #87C5FB 50%,
        #A1D1F9 50%,
        #D4E9FC 100%
        );
    -webkit-animation-name: blinking;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;
    -moz-animation-name: blinking;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 1s;
    animation-name: blinking;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 1s;
}

a.buttons.ok:active, a.buttons.cancel:active, a.buttons.small:active {
    -webkit-box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0.3), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
    -webkit-animation-name: none;
    -moz-box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0.3), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
    -moz-animation-name: none;
    box-shadow: 
            inset 0 19px 0 rgba(0,115,215,0.3), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
    animation-name: none;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #D3F7FD),
        color-stop(0.5, #87C5FB),
        color-stop(0.5, #A1D1F9),
        color-stop(1, #D4E9FC)
        );
    background-image: -moz-linear-gradient(
        center bottom,
        #D3F7FD 0%,
        #87C5FB 50%,
        #A1D1F9 50%,
        #D4E9FC 100%
        );
    border-top-color: #5a5caf;
    border-bottom-color: #52536f;
    border-left-color: #56578f;
    border-right-color: #56578f;
}


a.buttons.cancel, a.buttons.inactive, a.buttons.small {
    border-color: #9a9a9a;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #EBEBEB),
        color-stop(0.5, #ECECEC),
        color-stop(0.5, #F3F3F3),
        color-stop(1, #FFFFFF)
    );
    background-image: -moz-linear-gradient(
        center bottom,
        #EBEBEB 0%,
        #ECECEC 50%,
        #F3F3F3 50%,
        #FFFFFF 100%
    );
    -webkit-box-shadow: 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
    -moz-box-shadow: 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
    box-shadow: 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);       
}

a.buttons.inactive {
    opacity: 0.5;
    cursor: default;
}

a.buttons.small {
    height: 16px;
    line-height: 16px;
    font-size: 11px;
}

a.buttons.small:active {
    -webkit-box-shadow: 
            inset 0 16px 0 rgba(0,115,215,0.3), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
    -moz-box-shadow: 
            inset 0 16px 0 rgba(0,115,215,0.3), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
    box-shadow: 
            inset 0 16px 0 rgba(0,115,215,0.3), 
            inset 0 1px 0 rgba(255,255,255,1),
            0 1px 0 rgba(0,0,0,0.09);
}