title: Input tag runs unexpected CSS effect
body: <p>I´m trying to style my Drupal theme buttons but there´s something wrong when I put the same CSS into the &quot;input&quot; tag.</p>
  <p>In this snippet example we can verify 2 different effect with the same CSS code.</p>
  <p>I thought it was a Drupal problem but it´s not. When I got the code outside and try it with the input tag it shows the same way like in Drupal site.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Buttons */
  .form-submit {
    cursor: pointer;
    margin-left: 5px;
    margin-bottom: 15px;
    text-shadow: 0 -2px 0 #4a8a65, 0 1px 1px #c2dece;
    box-sizing: border-box;
    font-size: 2em;
    font-family: Helvetica, Arial, Sans-Serif;
    text-decoration: none;
    font-weight: bold;
    color: #5ea97d;
    height: 65px;
    line-height: 65px;
    padding: 0 32.5px;
    display: inline-block;
    width: auto;
    background: -webkit-gradient(linear, left top, left bottom, from(#9ceabd), color-stop(26%, #9ddab6), to(#7fbb98));
    background: linear-gradient(to bottom, #9ceabd 0%, #9ddab6 26%, #7fbb98 100%);
    border-radius: 5px;
    border-top: 1px solid #c8e2d3;
    border-bottom: 1px solid #c2dece;
    top: 0;
    -webkit-transition: all 0.06s ease-out;
    transition: all 0.06s ease-out;
    position: relative;
  }
  .form-submit:visited {
    color: #5ea97d;
  }
  
  .form-submit:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#baf1d1), color-stop(26%, #b7e4ca), to(#96c7ab));
    background: linear-gradient(to bottom, #baf1d1 0%, #b7e4ca 26%, #96c7ab 100%);
  }
  
  .form-submit:active {
    top: 6px;
    text-shadow: 0 -2px 0 #7fbb98, 0 1px 1px #c2dece, 0 0 4px white;
    color: white;
  }
  .form-submit:active:before {
    top: 0;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.7), 0 3px 9px rgba(0, 0, 0, 0.2);
  }
  
  .form-submit:before {
    display: inline-block;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    top: 6px;
    border-radius: 5px;
    height: 65px;
    background: linear-gradient(to top, #1e5033 0%, #378357 6px);
    -webkit-transition: all 0.078s ease-out;
    transition: all 0.078s ease-out;
    box-shadow: 0 1px 0 2px rgba(0, 0, 0, 0.3), 0 5px 2.4px rgba(0, 0, 0, 0.5), 0 10.8px 9px rgba(0, 0, 0, 0.2);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="submit" id="edit-submit" name="op" value="Comprar" class="form-submit"&gt;
  &lt;a class="form-submit" href="#0"&gt;Comprar&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>