diedVIPs

html knowhow

Button zeige Info












Button zeige Info

Dieses kleine Script zeigt ihnen bei Klick für 3 Sekunden eine Info.
So sieht´s aus



Dieses kleine Script zeigt ihnen bei Klick eine Info.
Quellcode
<html>
<head>
<style type="text/css">
#snackbar {visibility: hidden;min-width: 250px;margin-left: -125px;background-color: #333;color: #fff;text-align: center;border-radius: 2px;padding: 16px;
position: fixed;z-index: 1;left: 50%;bottom: 30px;font-size: 17px;}
#snackbar.show {visibility: visible;-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;} }
</style>
</head>

<body>
<button onclick="myFunction()">Zeige Info</button><br/>
<div id="snackbar">Dieses kleine Script zeigt ihnen bei Klick eine Info.</div>
<script>
function myFunction() {
var x = document.getElementById("snackbar");
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
</body>
</html>









Kontakt    Datenschutz    Impressum