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

Question

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

悬停时，右侧的透明圆角矩形应该向左移动并在 1 秒内覆盖整个按钮。所以，在悬停之后，我们会有这样的东西：

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

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

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

Answer 1

你可以这样做

className:hover{
//do stuff here
}

然后调整不透明度或任何你想要的:)

Answer 2

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

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

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

免责声明：我不知道我使用的（阿拉伯语？）文字说的是什么。

.btn {
    cursor: pointer;
    height: 40px;
    width: 200px;
    color: white;
    display: flex;
    flex-direction: row-reverse;
    border-radius: 10px;
    vertical-align: middle;
    text-decoration: none;
    background-color: #fb815e;
    font-size: 18px;
    font-family: 'Vazir', sans-serif;
    position: relative;
    text-align: center;
    line-height: 40px;
    border: none;
    margin: 0;
    padding: 0;  
}

.btn:hover .btn-inside {
width: 100%;
transition: width 1s ease;
}

.btn-inside {
opacity: 0.5;
border-radius: 10px;
background-color: #fc9c81;
width: 20%;
height: 40px;
line-height: 40px;
text-align: left;
position: absolute;
transition: width 1s ease;
}

.text {
margin: auto;
}

span {
    display: inline-block;
}

<button class="btn">
    <span class="text">العاشر ليونيكود</span>
    <span class="btn-inside">&nbsp;&nbsp;</span>
</button>

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

html/css button transparent second layer hover effect

css

hover

css-selectors