<div class="scl-toast-btn-wrapper"> <div class="scl-toast-btn">tost btn</div> </div> <div class="scl-toast-wrapper left">This is a toast</div> <script> const sclToastBtn = document.querySelector(".scl-toast-btn"); sclToastBtn.addEventListener("click", sclToast); function sclToast() { document.querySelector(".scl-toast-wrapper").style.display = "flex"; setTimeout(disappear, 3000); function disappear() { document.querySelector(".scl-toast-wrapper").style.display = "none"; } } </script>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter