Hover transition from bottom to top on button not working - html

Question

I am trying to mimic the hover transitions for buttons as found on this page.
I have the following so far:
.hs-button {
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
background: #fff336;
display: inline-block;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
input[type="submit"]:hover {
text-decoration: none;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
input[type="submit"]:hover {
border: 3px solid #000;
background-color: #000;
color: #fff336;
}
input[type="submit"]:hover:after {
height: 100%;
}
input[type="submit"]:after {
content: "";
background: #000;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index: -1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
<div class="hs_submit">
<div class="actions">
<input type="submit" value="DOWNLOAD NOW!" class="hs-button primary large">
</div>
</div>
The above button is the only button on my page and with the following above code, I'd expect it the black background to hover from bottom to top, but it's not - why?
Edit:
[Preview link to page][2]

Answer 1

You don't have to use pseudo-element with input tag (Can I use a :before or :after pseudo-element on an input field?). Consider adding pseudo element on a container. Also remove the background of your input. It need to be transparent so you can see the effect of pseudo-element behind.
Here is an example:
.actions {
display:inline-block;
position:relative;
}
.hs-button {
font-size: 16px;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
line-height: 1em;
color: #333333;
letter-spacing: 0;
padding:20px;
border:none;
display: inline-block;
position: relative;
cursor: pointer;
z-index:1;
}
.actions:hover input[type="submit"] {
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>

Answer 2

input not support ::before ::after you can use
<Button>
than add ::before ::after .
LIke https://jsfiddle.net/ufL55gfw/1/

Answer 3

Try below
.slider-button {
margin-top: 70px;
}
#media (max-width: 1220px) {
.slider-button {
margin-top: 30px;
}
}
.slider-button .button {
text-align: left;
}
#media (max-width: 1220px) {
.slider-button .button {
text-align: center;
}
}
.slider-button .button {
text-align: left;
}
.button {
text-align: center;
}
.button a{text-decoration:none;}
.button__item {
font-family: "Raleway", sans-serif;
font-weight: 500;
text-transform: uppercase;
font-size: 1.313rem;
line-height: 1em;
color: #333333;
letter-spacing: 0;
background: #fff336;
padding: 32.5px 65px;
display: inline-block;
position: relative;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.button__item:hover {
text-decoration: none;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.button__item:hover:after {
height: 100%;
}
.button__item:after {
content: "";
background: #fff;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
z-index: -1;
-webkit-transition: 0.3s;
transition: 0.3s;
}
<div class="slider-button"><div class="button">DOWNLOAD NOW</div></div>