CSSで作るホバーで円が展開するアニメーションボタン

<div class="kumonosu-wrapper">
    <a href="#" class="kumonosu-btn-more">
        <span class="kumonosu-btn-more__txt">BUTTON</span>
        <span class="kumonosu-btn-more__ico">
            <svg viewBox="0 0 52 52">
                <circle class="kumonosu-btn-more__bg" cx="26" cy="26" r="30" />
                <circle class="kumonosu-btn-more__circle-dashed" cx="26" cy="26" r="25" />
                <circle class="kumonosu-btn-more__circle-solid" cx="26" cy="26" r="25" />
                <g transform="translate(19, 19)">
                    <path class="kumonosu-btn-more__arrow-path" d="M2 12L12 2M12 2H6M12 2V8" />
                </g>
            </svg>
        </span>
    </a>
</div>

:root {
    --text-color: #2b2b2b;
    --circle-border: #2b2b2b;
    --hover-bg: #ffd6d6;
    --arrow-color: #2b2b2b;
}
body {
    margin: 0;
}
.kumonosu-wrapper {
    background-color: #f7f4ef;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.kumonosu-btn-more {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    font-size: 16px;
    position: relative;
    padding: 10px 0;
}
.kumonosu-btn-more__txt {
    position: relative;
    z-index: 2;
    margin-right: 15px;
    letter-spacing: 0.05em;
}
.kumonosu-btn-more__ico {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    overflow: visible;
}
.kumonosu-btn-more__ico svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.kumonosu-btn-more__circle-dashed {
    fill: none;
    stroke: var(--circle-border);
    stroke-width: 1;
    stroke-dasharray: 1.5 3.5;
    transition: opacity 0.2s ease;
}
.kumonosu-btn-more__bg {
    fill: var(--hover-bg);
    opacity: 0;
    transform: scale(0.5);
    transform-origin: 26px 26px;
    transition: opacity 0.2s ease, transform 0.5s cubic-bezier(0.15, 0.85, 0.35, 1.15);
}
.kumonosu-btn-more__circle-solid {
    fill: none;
    stroke: var(--circle-border);
    stroke-width: 1.2;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    transform: rotate(-90deg);
    transform-origin: 26px 26px;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.2, 1, 0.2, 1);
}
.kumonosu-btn-more__arrow-path {
    fill: none;
    stroke: var(--arrow-color);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kumonosu-btn-more:hover .kumonosu-btn-more__circle-dashed {
    opacity: 0;
}
.kumonosu-btn-more:hover .kumonosu-btn-more__bg {
    opacity: 1;
    transform: scale(1.5);
}
.kumonosu-btn-more:hover .kumonosu-btn-more__circle-solid {
    stroke-dashoffset: 0;
}
.kumonosu-btn-more:active {
    opacity: 0.8;
}