После того, как эффект границы радиационной проблемы

Question

У меня проблема с моим эффектом наведения.Я использую эффект после, чтобы анимировать ширину элемента слева направо.(От 0px до 100%) Использование радиуса границы не заполняет весь элемент.Какое решение для этого?

https://imgur.com/a/CZxy9Oq

.btn {
    &,
    &:link,
    &:visited {
        text-transform: uppercase;
        text-decoration: none;
        padding: 1.5rem 4rem;
        display: inline-block;
        border-radius: 10rem;
        transition: all .2s;
        position: relative;
        font-size: 2.6rem;
        font-weight: 800;
        color: $color-white;
        //Change for the <button> element
        border: none;
        cursor: pointer;
        z-index: 20;
        position: relative;
        overflow: hidden;

        @include respond(tab-port) { // width < 900?
            z-index: 10;
        }
    }

    &::after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        border-radius: 9rem;
        transition: all .2s ease-in-out;
        z-index: -1;
    }

    &--blue {
        border: 2px solid $color-primary-blue;

        &::after{
            background: $color-primary-blue;
        }
    }