Translate after on hover using CSS - html

Question

I'm designing the front end of an e-commerce website and while looking through some inspiration I found a really nice effect involving a button and a after on that button, that when hovering over it, the text of the button would go up and at the same time an icon would replace it. You can see what I mean here. I probably won't use this on the project but I got really confused trying to mimic this effect while using Dev Tools, and just ending up with a cart icon on the bottom of the page and would love to know how to create something similar to this.
This is the final result
I almost got to something but I can't seem to make the text and the icon move at the same time, sometimes the icon wouldn't move at all and just the whole button would do, and not the text.
Any ideas on how this could be achieved with CSS? I already went through CodePen to find something similar and I'm not really sure how this effect is called to google it
EDIT: Already tried this code on an with a button class.
.button {
background: none;
font-weight: 600;
line-height: inherit;
margin: 0;
padding: 0 15px;
margin-top: 0;
position: relative;
text-align: center;
vertical-align: top;
-webkit-transition: color 0.15s linear 0s,-webkit-transform 0.3s linear 0s;
text-transform: uppercase;
transition: color 0.15s linear 0s,transform 0.3s linear 0s;
}
.button:hover {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
.button:after {
background-color: inherit;
border-color: inherit;
border-style: inherit;
border-width: inherit;
font-size: 18px;
font-weight: 400;
height: auto;
margin: 0;
position: absolute;
left: 0;
top: 100%;
text-align: center;
width: 100%;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation: none;
animation: none;
}
.button:hover:after {
top: 150%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

Answer 1

Here is a simple example using a psuedo element and font-awesome icon
.btn {
background-color: turquoise;
border-radius: 10px;
color: white;
padding: 5px 10px;
position: relative;
overflow: hidden;
height: 20px;
display: inline-block;
transition: all .3s;
}
.btn span {
position: relative;
top: 0;
transition: all .3s;
}
.btn::after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f217";
position: absolute;
left: 50%;
transform: translatex(-50%);
top: 40px;
transition: all .3s;
font-size: 20px;
}
.btn:hover {
background-color: blue;
}
.btn:hover span {
top: -30px;
}
.btn:hover::after {
top: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<a href="#" class="btn">
<span>Add to cart</span>
</a>

Answer 2

Here is a slightly simpler example using two different p tags instead of text/svg. It shouldn't be too much trouble to convert:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
button {
width: 100px;
height: 40px;
overflow: hidden;
border: unset;
border-radius: 10px;
background-color: turquoise;
transition: all 200ms;
}
button:hover {
background-color: blue;
}
div {
height: 80px;
transform: translateY(0%);
transition: inherit;
}
div:hover {
transform: translateY(-50%)
}
p {
display: flex;
align-items: center;
justify-content: center;
color: white;
height: 50%;
font-size: 18px;
font-weight: 600;
}
<button>
<div>
<p class="one">text one</p>
<p class="two">text two</p>
</div>
</button>