Create cross-browser CSS3 Gradient Buttons

For past few months I was working on a project and got to learn lots of new things. I would love to share some good learnings like Create 'CSS3 Gradient Buttons'.

The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values.

CSS:
<style media="all"  type="text/css">
    .btn {
    overflow: hidden;
    zoom:1;
}
.btn input.secondary,
.btn button.secondary {
    background: #3c78c7;
    background: -moz-linear-gradient(top,  #4b97fa 0%, #3c78c7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b97fa), color-stop(100%,#3c78c7));
    background: -webkit-linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    background: -o-linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    background: -ms-linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    background: linear-gradient(top,  #4b97fa 0%,#3c78c7 100%);
    color: #fff;
}
.btn input.secondary:focus,
.btn button.secondary:focus,
.btn input.secondary:hover,
.btn button.secondary:hover {
    background: #4b97fa;
    background: -moz-linear-gradient(top,  #88bcff 0%, #4b97fa 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#88bcff), color-stop(100%,#4b97fa));
    background: -webkit-linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
    background: -o-linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
    background: -ms-linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
    background: linear-gradient(top,  #88bcff 0%,#4b97fa 100%);
}
.btn input.secondary:active,
.btn button.secondary:active {
    outline:0;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 50, 100, 0.4);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 50, 100, 0.4);
}
/* #### MAIN BUTTON STYLES #### */
.btn input,
.btn button {
    font-size: 18px;   
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

/* input + button styles*/
.btn input,
.btn button {
    border: none;
    padding: 0;
    margin: 0;
    padding: 3px 10px 4px;
    cursor: pointer;
    white-space:  normal;
    box-shadow: none;
    transition: none 0s ease 0s;
    text-align: left;
    -webkit-appearance: button;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Google Chrome and Safari adjustments */   
    .btn input,
    .btn button {
        height: 22px;
        padding-bottom: 1px;
        line-height: 1.428571; /* 20/14 */
    }   
}
</style>
<!--[if IE]>
<style media="all"  type="text/css">
.btn input,
.btn button {
    overflow: visible;
    font-size: 18px;   
}
.btn input.secondary,
.btn button.secondary {
    background: #3c78c7;  
    color: #fff;
    overflow: visible;
}
.btn input.secondary:focus,
.btn button.secondary:focus,
.btn input.secondary:hover,
.btn button.secondary:hover {
    background: #4b97fa;   
}
</style>
<![endif]-->

HTML:
<div class="btn action"><input type="submit" value="Submit" class="secondary"></div>