視線を集める！光が舞うアニメーションボタンのCSS

<div class="nya-center-wrap nya-glow-button-wrap">
<a class="nya-glow-button" href="#" rel="noopener">シークレットサイトを見てみる</a>
</div>

.nya-center-wrap {
text-align: center;
margin: 30px 0;
}

.nya-glow-button-wrap .nya-glow-button {
position: relative;
z-index: 10;
display: inline-block;
min-width: 250px;
transition: .2s;
border-radius: 32px;
padding: 12px 50px;
background-color: #17ad2f;
color: #fff;
font-weight: 700;
font-size: 16px;
text-decoration: none;
background-position: calc(100% - 24px) center;
background-size: auto 12px;
}

.nya-glow-button:before, .nya-glow-button:after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 32px;
z-index: -1;
}

/* 最初の光のアニメーション */
.nya-glow-button:before {
background: rgba(23, 173, 47, 0.6);
animation: nya-glow-animation1 3.0s infinite;
}

/* 二番目の光のアニメーション */
.nya-glow-button:after {
background: rgba(23, 173, 47, 0.6);
animation: nya-glow-animation2 3.0s infinite;
animation-delay: 1.5s;
}

@keyframes nya-glow-animation1 {
0% {
box-shadow: 0 0 0px 0 rgba(23, 173, 47, 0.6);
}
80% {
box-shadow: 0 0 0px 15px rgba(23, 173, 47, 0.1);
}
100% {
box-shadow: 0 0 10px 15px rgba(23, 173, 47, 0);
}
}

@keyframes nya-glow-animation2 {
0% {
box-shadow: 0 0 0px 0 rgba(23, 173, 47, 0.6);
}
80% {
box-shadow: 0 0 0px 15px rgba(23, 173, 47, 0.1);
}
100% {
box-shadow: 0 0 10px 15px rgba(23, 173, 47, 0);
}
}