html/css按钮透明第二层悬停效果

我想实现一个按钮。不悬停时是这样的：

当鼠标悬停时，右侧透明的圆形bourder矩形应该向左移动，并在1秒内覆盖整个按钮。所以，悬停之后，我们将有如下内容：

我的问题是我不知道该怎么办。我在网上找到了一些代码，但要么是从左到右，要么就是把我的箭头图标和文字从我的按钮中推出！我根本不想更改我的箭头图标或文本。我只想让vright透明矩形在悬停时向右移动，然后回到原来的位置。 我的按钮的css代码没有OUG效果，如下所示：

.btn {
    color: white;
    display: flex;
    flex-direction: row-reverse;
    Border: 2px solid white;
    border-radius: 10px;
    height: 80%;
    padding-top: 10px;
    width: 100%;
    text-align: center;
    margin-top: 0px;
    padding-right: 0px;
    vertical-align: middle;
    text-decoration: none;
    background-color: #fb815e;
    font-size: 18px;
    font-family: 'Vazir', sans-serif;
}

更新：

---

当没有悬停时，效果也应该以相同的速度反转。

您可以执行以下操作

className:hover{
//do stuff here
}

---

然后玩不透明度或任何你想玩的游戏：）

你希望一个元素是相对的（包装器），按钮/拉伸部分是绝对的。这样，它将充当覆盖层。您将依赖于过渡的一秒钟，以及覆盖部分的宽度

据我所知，这正是你想要的按钮

编辑：您要求它返回，这是通过第二次转换完成的。一个在悬停中，另一个在常规非悬停标记本身中

免责声明：我不知道我使用的（阿拉伯语？）文本是什么意思

.btn{
光标：指针；
高度：40px；
宽度：200px；
颜色：白色；
显示器：flex；
弯曲方向：行反向；
边界半径：10px；
垂直对齐：中间对齐；
文字装饰：无；
背景色：#fb815e；
字号：18px；
字体系列：“Vazir”，无衬线；
位置：相对位置；
文本对齐：居中；
线高：40px；
边界：无；
保证金：0；
填充：0；
}
.btn:将.btn悬停在内部{
宽度：100%；
过渡：宽度1s；
}
.btn内部{
不透明度：0.5；
边界半径：10px；
背景色：#fc9c81；
宽度：20%；
高度：40px；
线高：40px；
文本对齐：左对齐；
位置：绝对位置；
过渡：宽度1s；
}
.文本{
保证金：自动；
}
跨度{
显示：内联块；
}

العاشر ليونيكود
你好在第一部分，它起了作用。但当你退出悬停模式时，它会立即返回，而不是以相同的速度。我怎样才能解决这个问题？很抱歉，我认为我已经提到它应该以相同的效果和速度返回。@m0ss添加了它：）（解释在编辑部分：答案的一部分）谢谢。但问题在于运动部件。确切地说，是过渡。