B16 · Toast (הודעה קופצת)

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}

/* B16 · Toast (הודעה קופצת) */
.toast{position:fixed;bottom:24px;inset-inline-start:50%;translate:-50% 20px;background:var(--ink, #16182b);color:var(--bg, #f7f7fa);padding:13px 26px;border-radius:12px;font-size:15px;opacity:0;transition:opacity .24s,translate .24s;z-index:95;display:flex;gap:10px;align-items:center}
html[dir="rtl"] .toast{translate:50% 20px}
.toast.on{opacity:1;translate:-50% 0}
html[dir="rtl"] .toast.on{translate:50% 0}
.toast b{color:#12b76a}

HTML

<div class="stage tight center"><button class="gbtn show-t">שלח טופס (דמו)</button></div>
<div class="toast"><b>✓</b>קיבלנו! נחזור אליכם היום</div>

JS

let tmr;
document.querySelector(".show-t").addEventListener("click",()=>{
  const t=document.querySelector(".toast");
  t.classList.add("on");clearTimeout(tmr);
  tmr=setTimeout(()=>t.classList.remove("on"),3000);
});