<a href="リンク先のURL" class="link-btn">リンクボタン</a>
/***リンクボタンの設定***/
.link-btn {
display: block;
position: relative;
width: 95%;/*ボタンの幅*/
padding: 10px;
margin:30px auto;
background-color:#AEC4E5;/*ボタンの色*/
color: #fff;/*文字の色*/
border-radius: 30px;
font-weight: normal;
font-size: 1em;
text-align: center;
text-decoration: none;
overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*光らせる*/
.link-btn::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: kirari 3s ease-in-out infinite;
}
@keyframes kirari {
    0% {transform: scale(0) rotate(45deg); opacity: 0; }
    80% {transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% {transform: scale(4) rotate(45deg); opacity: 1; }
    100% {transform: scale(50) rotate(45deg); opacity: 0; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.