Shimmer Button

보통

반짝이는 빛 효과가 이동하는 버튼

#hover#css-only#shimmer#gradient

라이브 데모

코드

ShimmerButton.tsx

export const ShimmerButton = () => (
  <button className="shimmer-button">
    <span className="shimmer-button-text">Shimmer Effect</span>
  </button>
);

buttons.css

.shimmer-button::before {
  content: '';
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer-animation 2s infinite;
}