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>

Non-Transparent Elements Inside Transparent Elements

If using transparency on a block element it makes the text inside transparent as well. Is there a way I can prevent that from happening? I tried putting the text in another div and setting the opacity to 100%, but that didn't do the job. Although, logically, I thought it would!

Code Problem-
HTML
<div class="transparentDiv">
  <h2>Non-Transparent Elements Inside Transparent Elements.</h2>
</div>

CSS
.transparentDiv {
  height: 4em;
  padding-top: 2em;
  opacity: 0.5;
  background: black;
  border-top: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  margin-top: 5.0em;
}

This is where you notice that the text inside the transparentDiv as taken on the transparency of the transparentDiv itself. You don't want that, it's making the text hard to read! So you get smart and apply 100% transparency to the text inside the div. Doesn't work right?

Trick to resolve the issue-
This is a quick tip to demonstrate a way to work around the problem of child elements in your HTML inheriting the "alpha" settings of their parent.

As you likely know, just because an element occupies the same space as another element, doesn't make one a child of the other. That's the beauty of CSS positioning. So the trick to getting our non-transparent text into a transparent div is just to put that text outside of the div and push it visually inside with some CSS positioning.

HTML:
<h2 class="fullOpacity">Non-Transparent Elements Inside Transparent Elements.</h2>
<div class="transparentDiv"></div>

CSS:
.transparentDiv {
  height: 4em;
  padding-top: 2em;
  opacity: 0.5;
  background: black;
  border-top: 3px solid #ccc;
  border-bottom: 3px solid #ccc;
  margin-top: 5.0em;
}
h2.fullOpacity {
  position: relative;
  top: 4.7em;
}