CSS20 · הבזק אור על כפתור

CSS

/* מחלקות עזר של המאגר שהרכיב הזה משתמש בהן */
.stage{padding:var(--sec, clamp(120px, 12vw, 260px)) var(--gutter, clamp(24px, 5vw, 96px));position:relative}
.stage.tight{padding-block:clamp(48px,5vw,90px)}
.stage.full{padding-inline:0}
.gbtn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding-inline:28px;border-radius:999px;background:var(--accent, #4a3aff);color:var(--accent-ink, #fff);font-weight:500;font-size:16px;border:0;cursor:pointer;font-family:inherit}
.center{text-align:center}

/* CSS20 · הבזק אור על כפתור */
.shine-btn{position:relative;overflow:hidden}
.shine-btn::after{content:"";position:absolute;top:0;height:100%;width:40%;left:-60%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
transform:skewX(-20deg);animation:sweep 3.4s ease-in-out infinite}
@keyframes sweep{0%,60%{left:-60%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){.shine-btn::after{animation:none;display:none}}

HTML

<div class="stage tight center"><button class="gbtn shine-btn">קבעו שיחת ייעוץ</button></div>