Which is a better optmized CSS for a button design?
I like the second option, it is easy to read if you just reformat it a little bit (also corrected your :active selector and fixed the shadow in IE9):

a.btn_link {
    background: #4468b2; /* Old browsers */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4468b2), color-stop(100%,#3b5a9b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #4468b2 0%, #3b5a9b 100%); /* Chrome10+,Safari5.1+ */
    background:    -moz-linear-gradient(top,  #4468b2 0%, #3b5a9b 100%); /* FF3.6+ */
    background:     -ms-linear-gradient(top,  #4468b2 0%, #3b5a9b 100%); /* IE10+ */
    background:      -o-linear-gradient(top,  #4468b2 0%, #3b5a9b 100%); /* Opera 11.10+ */
    background:         linear-gradient(top,  #4468b2 0%, #3b5a9b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4468b2', endColorstr='#3b5a9b',GradientType=0 ); /* IE6-9 */

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;

    -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .4);
       -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .4);
            box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, .4);
    border-collapse: separate; /* http://stackoverflow.com/questions/5617455/issue-with-box-shadow-on-ie9/5617540#5617540 */

    color: #FFFFFF;
    text-decoration: none;
    padding: 5px 25px 5px 25px;
}
a.btn_link:active {
    margin: 2px -2px 0 2px; 
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
            box-shadow: none;
}


I would also add a simple hover affect like this:

a.btn_link:hover {
    background: #4468b2;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}


If you can, consider using a css preprocessor like LESS

.rounded-corners (@radius: 4px) {
    -webkit-border-radius: @radius;
       -moz-border-radius: @radius;
            border-radius: @radius;
}

.gradient-box (@baseColor) {
    @darker = darken(@baseColor, 6%);
    background: @baseColor; /* Old browsers */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@baseColor), color-stop(100%,@darker)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  @baseColor 0%, @darker 100%); /* Chrome10+,Safari5.1+ */
    background:    -moz-linear-gradient(top,  @baseColor 0%, @darker 100%); /* FF3.6+ */
    background:     -ms-linear-gradient(top,  @baseColor 0%, @darker 100%); /* IE10+ */
    background:      -o-linear-gradient(top,  @baseColor 0%, @darker 100%); /* Opera 11.10+ */
    background:         linear-gradient(top,  @baseColor 0%, @darker 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@baseColor', endColorstr='@darker',GradientType=0 ); /* IE6-9 */

    color: white;
    text-decoration: none;
    padding: 5px 25px 5px 25px;

    &amp;:hover {
        background: @baseColor;
        filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    }
}

.pressable-floating-box (@distance: 2px, @blur: 2px, @spread: 0px) {
    -webkit-box-shadow: @distance @distance @distance 0 rgba(0, 0, 0, .4);
       -moz-box-shadow: @distance @distance @distance 0 rgba(0, 0, 0, .4);
            box-shadow: @distance @distance @distance 0 rgba(0, 0, 0, .4);

    border-collapse: separate; // http://stackoverflow.com/questions/5617455/issue-with-box-shadow-on-ie9/5617540#5617540

    &amp;:active {
        margin-right: -@distance;
        margin-left: @distance;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }
}

a.btn_link {
    .rounded-corners;
    .gradient-box(#3b5a9b);
    .pressable-floating-box;
}


I really wouldn't be too worried about css efficiency, yes this does take a little more effort on the browser's part to render than a simple css background image, but the paths are all highly optimized already and this way you have defined the style instead of giving the browser a limited example (try a two line button with each, or zooming the document, or any other of the many ways to mess the button up in one or more browsers).

Comparing the http transfer efficiency of these two probably comes out in favor of the latter as well. The image version comes in 2 requests, while the pure css version is only one. I'd bet they both are fairly minimal on the total bandwidth compared to your page as a whole, but if you were really concerned about this you could always inline the image. If you want to go that route, here is a useful tool: http://www.greywyvern.com/code/php./binary2base64