HTML reset copy

<button onclick="myFunction()">Snackbar Demo</button><p> <div id="snackbar"><p>Webinars for all Programming Languages.netbax.net is a training site for learning web design. Content includes tutorials and reports on HTML, CSS, JavaScript, PHP, Python, SQL, Jquery, Xml, Ajax, and Bootstrap. It is a site whose services are completely free.</p></div>

CSS reset copy

#snackbar { visibility: hidden; min-width: 300px; background-color: #333; color: #fff; text-align: center; border-radius: 2px; padding: 16px; position: fixed; z-index: 1; left: 30%; right: 20%; bottom: 30px; margin-left: -150px; } .snackbar1 { visibility: visible !important; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; } @-webkit-keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } @keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;} } @-webkit-keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} } @keyframes fadeout { from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;} }

Js JAVASCRIPT reset copy

function myFunction() { var x = document.getElementById("snackbar") x.className = "snackbar1"; setTimeout(function(){ x.className = x.className.replace("snackbar1", ""); }, 3000); }