Slide-In Notification

<button class="sn-btn" id="snBtn">Show notification</button>
<div class="sn" id="sn"><div class="sn-ic">✓</div><div class="sn-c"><b>New message</b><span>Sarah sent you a file</span></div><div class="sn-bar"></div></div>

body{background:#f6f7fa}
.sn-btn{font:600 14px/1 system-ui,sans-serif;color:#fff;background:#1a1f36;border:0;border-radius:10px;padding:12px 22px;cursor:pointer}
.sn{position:fixed;top:20px;left:50%;display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:14px 18px;box-shadow:0 14px 40px rgba(20,25,50,.2);font-family:system-ui,sans-serif;transform:translate(-50%,-120px);opacity:0;transition:.45s cubic-bezier(.5,0,.2,1);overflow:hidden;min-width:240px}
.sn.show{transform:translate(-50%,0);opacity:1}
.sn-ic{width:34px;height:34px;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.sn-c b{display:block;color:#1a1f36;font-size:14px}.sn-c span{color:#8a93ad;font-size:13px}
.sn-bar{position:absolute;left:0;bottom:0;height:3px;background:#16a34a;width:100%}
.sn.show .sn-bar{animation:shr 3s linear forwards}
@keyframes shr{to{width:0}}

var sn=document.getElementById('sn'),t;document.getElementById('snBtn').onclick=function(){clearTimeout(t);sn.classList.remove('show');void sn.offsetWidth;sn.classList.add('show');t=setTimeout(function(){sn.classList.remove('show')},3000)};