Shimmer Button
光の反射が流れるシマーエフェクト。プレミアム感を演出。
HTML
<button class="shimmer-btn">Subscribe</button>
CSS
.shimmer-btn {
position: relative;
padding: 14px 36px;
background: #1a1a1a;
color: #fff;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
overflow: hidden;
}
.shimmer-btn::after {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
background: linear-gradient(
115deg,
transparent 40%,
rgba(255,255,255,.12) 45%,
rgba(255,255,255,.2) 50%,
rgba(255,255,255,.12) 55%,
transparent 60%
);
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%) rotate(15deg); }
100% { transform: translateX(100%) rotate(15deg); }
}