CSS09 · רעידת שגיאה

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}

/* CSS09 · רעידת שגיאה */
.err-demo{display:flex;flex-direction:column;gap:10px;align-items:center}
.err-input{font-family:inherit;font-size:16px;padding:13px 18px;border:1px solid var(--line, #e4e4ee);border-radius:12px;width:min(320px,80vw)}
.err-input.shake{animation:shake .35s;border-color:#d92d20}
@keyframes shake{0%,100%{translate:0}20%{translate:8px 0}40%{translate:-8px 0}60%{translate:5px 0}80%{translate:-5px 0}}
.err-msg{font-size:13px;color:#d92d20;opacity:0;transition:opacity .2s}
.err-msg.on{opacity:1}

HTML

<div class="stage tight"><div class="err-demo">
<input class="err-input" placeholder="הקלד משהו ולחץ שלח">
<span class="err-msg">המספר לא נראה תקין, אפשר לבדוק?</span>
<button class="gbtn err-send">שלח</button>
</div></div>

JS

document.querySelector(".err-send").addEventListener("click",()=>{
  const i=document.querySelector(".err-input");
  i.classList.remove("shake");void i.offsetWidth;i.classList.add("shake");
  document.querySelector(".err-msg").classList.add("on");
});