Animated hover state for <button> doesn't work as intended

Question

I have two type's of buttons on the page I am creating:

1. Actual buttons <button>
2. Buttons created from <input type="submit">

I am trying to create button's, which on hover, perform like this:

.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%;
}

<div class="hs_submit">
  <div class="actions">
    <input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
  </div>
</div>

As you can see, on hover, the black panel come's from bottom to top. I have managed to achieve this for <input type="submit"> buttons, but I can't seem to emulate the same aesthetics for <button>:

.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);
}

<div class="cta-wrapper">
    <div class="cta-image">
    </div>
    <div class="cta-text">
        <p><button>Download</button></p>
    </div>
    <a class="cta-link" href="#"></a>
</div>

1. Why isn't <button> performing like <input>?
2. For the <input> 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. How can I achieve this? The only way I can get the hover to work right now is to set the background as transparent - and input doesn't support and :after so I don't know how to work around this?

Answer 1

.cta-wrapper{
    background-color: #fff336;  
  font-size: 16px;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  line-height: 1em;
  color: #333333;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index:1;
}
.cta-text{
  display:inline-block;
  position:relative;
}
.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-text:hover button {
    border: 3px solid #000;
    color: white;
    background:transparent;
}
.cta-text:before {
  content: "";
  background: #000;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: -1;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.cta-text:hover::before {
  height:100%;
}
span{
  font-family: 'Raleway', sans-serif;
}

<div class="cta-wrapper">
    <div class="cta-image">
    </div>
    <div class="cta-text">
        <button><span>Download</span></button>
    </div>
    <a class="cta-link" href="#"></a>
</div>

Answer 2

Well, here it is, I don't see your problem ...

.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 button {
    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%;
}

<div class="hs_submit">
  <div class="actions">
    <button class="hs-button primary large">DOWNLOAD NOW</button>
  </div>
</div>