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

Question

I have two type's of buttons on the page I am creating:
Actual buttons <button>
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>
Why isn't <button> performing like <input>?
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

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>

Answer 2

.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>