how to make toast in html css and javascript

Hello friends, Welcome to your Techgsr.co blog. And today in this article we will make toast in html css and javascript .So let’s go to our to.

HTML :-

<div class='toast' style='display:none'>I did something!</div>
<button>Do something!</button>

CSS:-

body, html {
    height:100%;
    width:100%;
    min-height:100%;
    padding:0;
    margin:0;
}
.toast {
    width:200px;
    height:20px;
    height:auto;
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:10px;
    background-color: #35bc7a;
    color: #F0F0F0;
    font-family: Calibri;
    font-size: 20px;
    padding:10px;
    text-align:center;
    border-radius: 7px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}

Javascript:-

$('button').click(function () {
    $('.toast').stop().fadeIn(400).delay(3000).fadeOut(500); //fade out after 3 seconds
});

    $('.toast').stop().fadeIn(400).delay(3000).fadeOut(500); //fade out after 3 seconds

So I hope that you learn about the how to make toast in html css and javascript And if you have any more queries about progrmming ,web Devlopment ,tech,computer relegated then feel free to discuss your problem in the comment section.Thank you so much and come back for more updates about Techgsr.co .

Related posts: