通过位置的背景颜色：绝对伪元素

Question

我正在设计一个 :hover 滑动按钮动画，但由于某种原因，当按钮悬停时，我仍然可以看到它下面元素的颜色穿过左下角和左上角，就像你在第二个上看到的那样图片，它并不多但按比例缩小它在屏幕上显示一个彩色像素，我什至不知道如何用英语描述它以在谷歌上搜索解决方案（英语不是我的母语）。 overflow: hidden 和 border-radius 之间似乎是一种奇怪的交互。提前致谢。

ps：也许渐变是要走的路？

这里是 html/css 代码：

<div class="header-buttons">
    <a class="btn" href="#"><span>Contactez-nous</span></a>
</div>

.header-buttons {
    grid-area: btn;
    display: flex;
    justify-content: space-evenly;
    .btn {
        font-size: 1.5rem;
        padding: 1rem 1.6rem;
        background-color: inherit;
        color: inherit;
        border-radius: 2px;
        overflow: hidden;
        position: relative;
        font-weight: 500;
        display: block;
        span {
            z-index: 2;
            position: relative;
        }
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: $gris-clair;
            transform: translatex(-102%);
            transition: all 0.3s ease-in-out;

        }
        &:hover {
            color: $font;
            &::before {
                transform: translatex(-3%);
            }
        }
    }
}