Белые пиксели внутри закругленного элемента после смены фона

Question

Я пытаюсь сделать кнопку с эффектом наведения, но когда я меняю фон при наведении, белые (или размытые) пиксели появляются возле закругленных углов. Есть ли способ избавиться от них? Для наглядности прилагаю картинку.

Вот так выглядит ошибка

Вот мой HTML:

<a href="contact.html">
    <div class="cta-btn">
        <div class="cta-btn--background"></div>    
        <span class="cta-btn--text">Kontaktujte nás</span>
    </div>
</a>

А вот SCSS:

.cta-btn {
    width: 37.5rem;
    height: 8.4rem;
    border: 2px solid $color-blue-dark-3;
    border-radius: 10rem;
    box-shadow: 0 .5rem .4rem .1rem rgba($color-black, .25);
    cursor: pointer;
    background-color: $color-white;
    overflow: hidden;

    position: relative;
    z-index: 100;

    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        box-shadow: 0 .3rem .4rem .1rem rgba($color-black, .25);
        color: $color-white;
        background-position-y: 100%;
        transform: translateY(.1rem);

        .cta-btn--background {
            height: 100%;
            bottom: 0;
            top: unset
        }
        .cta-btn--text {
            color: white;
        }
    }

    &--background {
        width: 100%;
        height: 0%;
        background-color: $color-blue-dark-3;

        position: absolute;
        left: 0;
        top: 0;

        transition: height .3s;
    }
    &--text {
        color: $color-blue-dark-3;
        font-size: $font-cta-btn;
        text-transform: uppercase;
        letter-spacing: .2rem;

        position: relative;

        transition: color .2s;
    }
}