Unable to animate button after using :after property - html

Question

I'm trying to get my head around pseudo elements, but cannot seem to get a simple button animation to work with it.
On hover, I want a panel to go from bottom to top. Similar to the button found on this page (1st row, 2nd button).
From my understanding, using .btn:after will add any css after each .btn class. But then why doesn't this work?
.btn {
border: 1px solid #65bb39;
color: #fff;
background-color: #65bb39;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border: 1px solid #65bb39;
background-color: #fff;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="text">
<span class="btn">Test</span>
</div>
On hover, I want the border to turn #65bb39 and the block to fill white (from bottom to top).
Of course, any feedback on before and after is appreciated!

Answer 1

So will need to add a hover state to the btn:after and then transition css between the two states. See snippet below.
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn {
color: #fff;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn:hover{
color: #65bb39;
}
.btn:after, .btn:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
color: #65bb39;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
border: 1px solid #65bb39;
background-color: #fff;
}
.btn:before {
z-index: -2;
background-color: #65bb39;
height: 100%;
}
.btn:after {
z-index: -1;
}
.btn:hover:after {
height: 100%;
}
<div class="btn">Test</div>

Answer 2

I think this is what you're looking for:
body,
html {
height: 100%;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
a {
color: white;
text-decoration: none;
font-weight: bold;
font-size: 1.25em;
text-align: center;
line-height: 75px;
}
.button {
height: 75px;
width: 200px;
position: absolute;
border: 1px solid #65bb39;
background: transparent;
transition: all .3s ease-in-out;
}
.button::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #65bb39;
z-index: -1;
transition: all .3s ease-in-out;
}
.button:hover {
color: #65bb39;
}
.button:hover::after {
height: 0%;
}
.button:hover::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: white;
z-index: -2;
}
Button

Answer 3

There you go:
.btn {
border: 3px solid #65bb39;
background: none;
color: #65bb39;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
outline: none;
position: relative;
transition: all 0.3s;
}
.btn:hover {
color: #FFFFFF;
}
.btn:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
background: #65bb39;
z-index: -1;
transition: all 0.3s;
}
.btn:hover:after {
height: 100%;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="text">
<span class="btn">Test</span>
</div>

Answer 4

Try this
.btn {
border: 2px solid #65bb39;
background: none;
color: #fff;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
outline: none;
position: relative;
transition: all 0.3s;
}
.btn:hover {
color: #65bb39;
}
.btn:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #65bb39;
z-index: -1;
transition: all 0.4s;
}
.btn:hover:after {
height: 0%;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="text"><span class="btn">Test</span></div>