Shining Button

.shining-button-wrapper {
position: relative;
overflow: hidden;
}

.shining-button-wrapper::before {
content: “”;
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0) 70%
);
top: 0;
left: -100px;
opacity: 0.6;
animation: shine 1.5s ease-out infinite;
}

@keyframes shine {
0% {
left: -100px;
}
60% {
left: 100%;
}
100% {
left: 100%;
}
}