html - 需要帮助使按钮的左侧向左流动

Question

我是 web 开发的新手，我试图对左按钮产生影响，当你将鼠标悬停在它上面时，会出现一个较小的箭头，整个按钮会扩展到屏幕的左侧，但对于某些人来说原因是它看起来不像我想要的那样光滑，而且我找不到办法做到这一点，有人可以帮助我吗？ :) PS:Rmain是按钮上一直显示的箭头，Rside是悬停在按钮上时出现的箭头。

html:

<button class="right">
        <span class="Rmain"></span>
        <span class="Rside"></span>
    </button>

CSS:

.left {
    background-color: rgba(255, 255, 255, 0.863);
    border: 4px solid rgb(60, 57, 238);
    color: rgb(0, 0, 0);
    padding: 145px 10px;
    margin: 50px;
    width: 55px;
    text-align: right;
    border-radius: 10%;
    position: absolute;
    transition: 0.6s;
}

.left:hover {
    box-shadow: 5px 12px 16px 0 rgba(0, 0, 0, 0.4);
    background-color: rgb(60, 57, 238);
    color: rgb(255, 255, 255);
    opacity: 75%;
    cursor: pointer;
    border-left-width: 95px;
    transition: 0.6s;
}

.Lmain {
    position: absolute;
    height: 0px;
    width: 0px;
    top: 40%;
    right: 86%;
    font-size: 40px;
}

.Lmain::after {
    content: '\290C';
}

.Lside {
    position: absolute;
    color: white;
    height: 0px;
    opacity: 0;
    top: 40%;
    right: 58%;
    font-size: 39px;
    transition: 0.4s;
}

.Lside::after {
    content: '\2039';
}

.left:hover .Lside {
    right: 72%;
    transition: 1s;
    opacity: 1;
}

button:focus {
    outline: 0;
}

Answer 1

我不确定这是否是您要找的，但这样看起来更好:

将 border-right-width:20px; 添加到 css 的 .left:hover 部分