HTML button styled with CSS

styled-button.css

/* you can test this solution here
** http://jsbin.com/ItiCaTU/1
**
** some test results
** http://www.browserstack.com/screenshots/9fdce4d0529cfe944a90f7cbbfd33e24fe3feb70
*/
input[type='submit'],input[type='button']
{
  /* disable problems with mobile platforms */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  background: #f2f2f2; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f2f2f2 30%, #e2e2e2 70%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#f2f2f2), color-stop(70%,#e2e2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f2f2f2 30%,#e2e2e2 70%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f2f2f2 30%,#e2e2e2 70%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f2f2f2 30%,#e2e2e2 70%); /* IE10+ */
background: linear-gradient(to bottom,  #f2f2f2 30%,#e2e2e2 70%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-8 */

  border: 1px solid gray;
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 6px;
  padding: 3px 20px;
}

input[type='submit']:hover,input[type='button']:hover {
  background: #feffeb; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNmZWZmZWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiNmZGZmY2MiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #feffeb 30%, #fdffcc 70%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#feffeb), color-stop(70%,#fdffcc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #feffeb 30%,#fdffcc 70%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #feffeb 30%,#fdffcc 70%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #feffeb 30%,#fdffcc 70%); /* IE10+ */
background: linear-gradient(to bottom,  #feffeb 30%,#fdffcc 70%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffeb', endColorstr='#fdffcc',GradientType=0 ); /* IE6-8 */

}

input[type='submit']:active,input[type='button']:active {
  /* inner shadow */
  -moz-box-shadow:    inset 0px 1px 2px 0px #2f2f2f;
  -webkit-box-shadow: inset 0px 1px 2px 0px #2f2f2f;
  box-shadow:         inset 0px 1px 2px 0px #2f2f2f;
  
   background: #f2f2f2; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiNlMmUyZTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f2f2f2 30%, #e2e2e2 70%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#f2f2f2), color-stop(70%,#e2e2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f2f2f2 30%,#e2e2e2 70%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f2f2f2 30%,#e2e2e2 70%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f2f2f2 30%,#e2e2e2 70%); /* IE10+ */
background: linear-gradient(to bottom,  #f2f2f2 30%,#e2e2e2 70%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-8 */
  
  padding: 3px 20px;
  padding-top: 5px;
  padding-bottom: 1px;
}

input[type='submit']:focus,input[type='button']:focus {
  -webkit-box-shadow: 0px 0px 4px #0023d6;
  -moz-box-shadow:    0px 0px 4px #0023d6;
  box-shadow:         0px 0px 4px #0023d6;
  
  outline:none;
}

input[type='submit']:focus:active,input[type='button']:focus:active {
  -webkit-box-shadow: 0px 0px 4px #0023d6,
    inset 0px 1px 2px 0px #2f2f2f;
  -moz-box-shadow:    0px 0px 4px #0023d6,
    inset 0px 1px 2px 0px #2f2f2f;
  box-shadow:         0px 0px 4px #0023d6,
    inset 0px 1px 2px 0px #2f2f2f;
  
  outline:none;
}

styled-button.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none !important;
    }
  </style>
<![endif]-->
</head>
<body>
  <form>
    <span>Button inside of Form</span>
    <br/><br/>
    <input tabindex="1" class="gradient" type="submit" value="Button" id="submit" />
  </form>
  <hr>
  <span>Simple button</span>
  <br/><br/>
  <input tabindex="2" class="gradient" type="button" value="Button" id="submit" />
</body>
</html>