Html 使用CSS悬停后进行翻译

我正在设计一个电子商务网站的前端，在寻找一些灵感的同时，我发现了一个非常好的效果，包括一个按钮和一个按钮后，当鼠标悬停在上面时，按钮的文本会上升，同时一个图标会取代它。你明白我的意思了。我可能不会在项目中使用它，但我在使用开发工具时尝试模仿这种效果，结果在页面底部出现了一个购物车图标，我很想知道如何创建类似的东西

这是最终结果

我几乎做到了一些事情，但我似乎无法使文本和图标同时移动，有时图标根本不会移动，只有整个按钮可以，而不是文本

关于如何使用CSS实现这一点，有什么想法吗？我已经通过CodePen找到了类似的东西，我不确定google是如何调用这种效果的

编辑：已使用button类在上尝试此代码

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

---

下面是一个稍微简单的示例，使用两个不同的

p

标记代替text/svg。转换应该不会太麻烦：

*{
填充：0；
保证金：0；
框大小：边框框；
}
钮扣{
宽度：100px；
高度：40px；
溢出：隐藏；
边界：未设置；
边界半径：10px；
背景颜色：青绿色；
过渡：所有200ms；
}
按钮：悬停{
背景颜色：蓝色；
}
div{
高度：80px；
转化：translateY（0%）；
过渡：继承；
}
div:悬停{
转换：translateY（-50%）
}
p{
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：白色；
身高：50%；
字号：18px；
字号：600；
}

文本一

文本二

下面是一个使用psuedo元素和字体图标的简单示例

.btn{
背景颜色：青绿色；
边界半径：10px；
颜色：白色；
填充物：5px10px；
位置：相对位置；
溢出：隐藏；
高度：20px；
显示：内联块；
过渡：全部3秒；
}
.btn跨度{
位置：相对位置；
排名：0；
过渡：全部3秒；
}
.btn：：之后{
字体系列：“字体真棒5免费”；
字号：900；
内容：“\f217”；
位置：绝对位置；
左：50%；
转化：translatex（-50%）；
顶部：40px；
过渡：全部3秒；
字体大小：20px；
}
.btn:悬停{
背景颜色：蓝色；
}
.btn：悬停跨度{
顶部：-30px；
}
.btn:悬停：：之后{
顶部：5px；
}

请添加您迄今为止尝试过的代码，以获得“添加到购物车”按钮上的效果？@NicoShultz知道我忘了什么，updated@sergeykuznetsov没错，我刚刚用我试过的代码更新了这个问题