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 {
     color: #fff;
     -webkit-animation: halftone 1s forwards;
     animation: halftone 1s forwards;
     background: -webkit-radial-gradient(circle, #000 0.2em, rgba(0, 0, 0, 0) 0.25em) 0 0/1.25em 1.25em, -webkit-radial-gradient(circle, #000 0.2em, rgba(0, 0, 0, 0) 0.25em) 6.25em 6.25em/1.25em 1.25em;
     background: radial-gradient(circle, #000 0.2em, rgba(0, 0, 0, 0) 0.25em) 0 0/1.25em 1.25em, radial-gradient(circle, #000 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;
     }
 }