How to create Custom Toast Message using Css and Javascript

Posted By : Gaurav Arora | 15-Apr-2017

Hi, as we all know that showing toast message as a source of some info, whether its error message or success message is a common thing among apps or web apps. For this we have to use some plugins. What about creating our custom one’s. without including any js files or multiple lines on css. So, In this blog we are going to create our custom toast messages.

Let’s start by creating our HTML structure. For the structure I’m using a button and a div which will appears on the click of the button as a toast message.


 
Message

After that we will write some css for our toast message

		#toast {
				visibility: hidden;
				min-width: 250px;
				background-color: green;
				color: #fff;
				padding: 16px;
				position: fixed;
				z-index: 1;
				right: 20px;
				bottom: 80%;
			}

			#toast.show {
				visibility: visible;
				-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
				animation: fadein 0.5s, fadeout 0.5s 2.5s;
			}
    

Now we add will some Css3 Animations to our Toast Message for fade in fade out effects.

			@keyframes fadein {
				from {bottom: 0; opacity: 0;}
				to {bottom: 80%; opacity: 1;}
			}

			@keyframes fadeout {
				from {bottom: 80%; opacity: 1;}
				to {bottom: 0; opacity: 0;}
			}
  

For these keyframes make sure you also define the browser specific prefixes, like -webkit, -moz, -o, -ms. So, they will work properly in every browser.

Now we will write our javascript function:

			function toastFunction() {
				var x = document.getElementById("toast")
				x.className = "show";
				setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
			}
    

In this way we can create our custom toast messages.

About Author

Author Image
Gaurav Arora

Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.

Request for Proposal

Name is required

Comment is required

Sending message..