title: Animated hover state for <button> doesn't work as intended
body: <p>I have two type's of buttons on the page I am creating:</p>
  
  <ol>
  <li>Actual buttons <code>&lt;button&gt;</code></li>
  <li>Buttons created from <code>&lt;input type="submit"&gt;</code></li>
  </ol>
  
  <p>I am trying to create button's, which <strong>on hover, perform like this</strong>:</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>.actions {
    display:inline-block;
    position:relative;
  }
  .hs-button {
      background-color: #fff336;
  }
  .hs-button {
      padding: 15px 20px 15px 20px;
    font-size: 16px;
    font-family: "Raleway", sans-serif;
    text-transform: uppercase;
    line-height: 1em;
    color: #333333;
    letter-spacing: 0;
    border: 3px solid transparent;
    display: inline-block;
    position: relative;
    cursor: pointer;
    z-index:1;
  }
  .actions:hover input[type="submit"] {
      border: 3px solid #000;
      color: #fff336;
      background:transparent;
  }
  .actions:before {
    content: "";
    background: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index:0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .actions:hover::before {
    height:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hs_submit"&gt;
    &lt;div class="actions"&gt;
      &lt;input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, on hover, the black panel come's from bottom to top. I have managed to achieve this for <code>&lt;input type="submit"&gt;</code> buttons, but I can't seem to emulate the same aesthetics for <code>&lt;button&gt;</code>:</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>.cta-wrapper .cta-text p button{
        border: 3px solid #fff336;
  }
  .thank-you .cta-wrapper {
      background-size: cover;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      position: relative;
      transition:all 0.3s;
  }
  .cta-text {
      background-color: #ba1974;
      padding:30px 30px 45px;
  }
  .cta-text {
      background-color: #474747;
  }
  .cta-wrapper .cta-link {
      position:absolute;
      display:block;
      height:100%;
      width:100%;
      top:0;
      left:0;
  }
  .cta-text p {
      font-size:16px;
      line-height:24px;
      font-weight:normal;
      font-family: 'Raleway', sans-serif;
      margin:0 auto 30px;
      color:#fff;
  }
  .cta-text p:last-child {
      margin-bottom:0;
  }
  .cta-text button {
      -webkit-appearance: none;
      width: 179px;
      max-width: 100%;
      border: 2px solid #fff336;
      color: #000;
      background-color: #fff336;
      font-size: 16px;
      font-family: 'Calibri W01 Regular_904604';
      font-weight:400;
      line-height: 1em;
      padding: 11px 0 12px;
      box-sizing: border-box;
      cursor: pointer;
      transition:all 0.25s;
  }
  .cta-wrapper:hover .cta-text button {
      background-color: #000;
      color:#fff336;
      border: 3px solid #000;
  }
  .cta-wrapper:hover .cta-text button p {
      color:#fff336;
  }
   p.button:first-of-type a:hover {
    text-decoration: none;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cta-wrapper"&gt;
      &lt;div class="cta-image"&gt;
      &lt;/div&gt;
      &lt;div class="cta-text"&gt;
          &lt;p&gt;&lt;button&gt;Download&lt;/button&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;a class="cta-link" href="#"&gt;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol>
  <li>Why isn't <code>&lt;button&gt;</code> performing like <code>&lt;input&gt;</code>?</li>
  <li>For the <code>&lt;input&gt;</code> button, when you hover over the button, the background goes transparent for a second and then fills in with black. I want the background to remain yellow and the black to fill it on hover. <strong>How can I achieve this?</strong> The only way I can get the hover to work right now is to set the <code>background</code> as <code>transparent</code> - and input doesn't support and <code>:after</code> so I don't know how to work around this?</li>
  </ol>