css——鼠标经过按钮时样式（radial-gradient）

<a href="" class="dxd_radial-gradient">查看更多</a>

:root {
    --main-color: #555;
}
.dxd_radial-gradient {
    width: 150px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: 1px solid var(--main-color);
}

.dxd_radial-gradient:hover {
    -webkit-animation: halftone 1s forwards;
    animation: halftone 1s forwards;
    background: -webkit-radial-gradient(circle, #9c89f7 0.2em, rgba(0, 0, 0, 0) 0.25em) 0 0/1.25em 1.25em, -webkit-radial-gradient(circle, #9c89f7 0.2em, rgba(0, 0, 0, 0) 0.25em) 6.25em 6.25em/1.25em 1.25em;
    background: radial-gradient(circle, #9c89f7 0.2em, rgba(0, 0, 0, 0) 0.25em) 0 0/1.25em 1.25em, radial-gradient(circle, #9c89f7 0.2em, rgba(0, 0, 0, 0) 0.25em) 6.25em 6.25em/1.25em 1.25em;
}

@-webkit-keyframes halftone {
    100% {
        background-size: 2.375em 2.375em, 0.1em 0.1em;
    }
}

@keyframes halftone {
    100% {
        background-size: 2.375em 2.375em, 0.1em 0.1em;
    }
}