思わずクリックしたくなる!?押せるボタンやキラッと光るボタンのCSS

<div class="nya-btn-container"><a href="#" rel="nofollow">ボタンが押されたように凹むボタン</a></div>

.nya-btn-container a {
display: inline-block;
padding: 10px 20px;
background-color: #e69400;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
border: 2px solid transparent;
border-radius: 5px;
box-shadow: 0 5px 0 rgba(179, 115, 0, 1);
opacity: 1;
transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.nya-btn-container a:hover {
box-shadow: 0 2px 0 rgba(179, 115, 0, 1);
transform: translateY(3px);
opacity: 0.9;
}

<a href="#" class="nyainy-btn" target="_blank" rel="noopener">キラッと光が走るボタン！</a>

.nyainy-btn {
display: inline-block;
position: relative;
padding: 10px 20px;
margin: 10px auto;
background-color: #e99710;
box-shadow: 1px 1px 5px gray;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
color: #fff !important;
text-align: center;
text-decoration: none;
overflow: hidden;
}

.nyainy-btn::before {
position: absolute;
content: '';
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-45deg);
animation: nyainy-btn 2.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
}
@keyframes nyainy-btn {
0% {
left: -100%;
}
25% {
left: 100%;
}
100% {
left: 100%;
}
}