How to make a Toast Notification in HTML CSS and JavaScript ?

Last Updated : 02 Nov, 2023

In this article, we’ll build a Toast Notification app using HTML, CSS, and JavaScript. It features 4 distinct toast types triggered by buttons: “Submit” for a green “Success” toast, each with unique CSS animations. JavaScript manages their display duration.

Final Output

Output Preview

Prerequisites

Approach

The HTML structure includes buttons, and a heading using <button>, <h1>, and <h3> tags.
All styling, including colors, layout, and alignment, is handled via CSS.
JavaScript defines an icon object for toast icons and a showcase function displaying toasts based on the message, toast type, and duration.
It creates a <div> element with CSS classes based on the toast type and manages toast animation duration using the duration object.
Event listeners handle button clicks and display the appropriate toast.

Example: This example illustrates the basic implementation for creating the Toast Notification in HTML, CSS & JS.

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title>Custom Toast Notification</title> 
    <link rel="stylesheet" 
          href="style.css"> 
    <link rel="stylesheet"
        href= 
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> 
</head> 
  
<body> 
    <div class="container"> 
        <h3> 
             Toast Notification in  
             HTML CSS JavaScript 
          </h3> 
        <div class="toast-buttons"> 
            <div class="toast-row"> 
                <button type="button" 
                        class="custom-toast  
                               success-toast"> 
                    Submit 
                  </button> 
                <button type="button" 
                        class="custom-toast  
                               danger-toast"> 
                    Failed 
                  </button> 
                <button type="button" 
                        class="custom-toast  
                               info-toast"> 
                    Information 
                  </button> 
                <button type="button" 
                        class="custom-toast  
                               warning-toast"> 
                    Warning 
                  </button> 
            </div> 
        </div> 
    </div> 
    <div class="toast-overlay" 
         id="toast-overlay"></div> 
    <script src="./script.js"></script> 
</body> 
  
</html>

CSS

/* style.css */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
  
body { 
    min-height: 97vh; 
    background: #d4d2a5; 
    background-image: linear-gradient( 
        to right, 
        #f1bebe 0%, 
        #f3d87f 100%
    ); 
    padding: 3em 0; 
    font-family: Arial, sans-serif; 
} 
  
h3 { 
    text-align: center; 
} 
  
.toast-buttons { 
    max-width: 700px; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 15px; 
    margin: 2em auto; 
} 
  
.toast-row { 
    display: flex; 
    justify-content: center; 
    margin: 1em 0; 
    padding: 1rem; 
    flex-wrap: wrap; 
} 
  
button.custom-toast { 
    padding: 0.5rem 1rem; 
    border: none; 
    color: #fff; 
    font-weight: 500; 
    border-radius: 5px; 
    box-shadow: 2px 2px 10px
        rgba(0, 0, 0, 0.785); 
    cursor: pointer; 
    width: 150px; 
    margin: 0.5em; 
    transition: filter 0.2s ease-in-out, 
        transform 0.3s ease-in-out; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 1rem; 
    background-color: transparent; 
    outline: none; 
    background: #3498db; 
    color: #fff; 
} 
  
button.custom-toast:hover { 
    filter: brightness(0.9); 
} 
  
button.success-toast { 
    background-color: #2ecc71; 
} 
  
button.danger-toast { 
    background-color: #e74c3c; 
} 
  
button.info-toast { 
    background-color: #3498db; 
} 
  
button.warning-toast { 
    background-color: #f1c40f; 
} 
  
h1 { 
    color: green; 
} 
  
.toast { 
    position: fixed; 
    top: 25px; 
    right: 25px; 
    max-width: 300px; 
    background: #fff; 
    padding: 0.5rem; 
    border-radius: 4px; 
    box-shadow: -1px 1px 10px
        rgba(0, 0, 0, 0.3); 
    z-index: 1023; 
    animation: slideInRight 0.3s 
            ease-in-out forwards, 
        fadeOut 0.5s ease-in-out 
            forwards 3s; 
    transform: translateX(110%); 
} 
  
.toast.closing { 
    animation: slideOutRight 0.5s 
        ease-in-out forwards; 
} 
  
.toast-progress { 
    position: absolute; 
    display: block; 
    bottom: 0; 
    left: 0; 
    height: 4px; 
    width: 100%; 
    background: #b7b7b7; 
    animation: toastProgress 3s 
        ease-in-out forwards; 
} 
  
.toast-content-wrapper { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 
  
.toast-icon { 
    padding: 0.35rem 0.5rem; 
    font-size: 1.5rem; 
} 
  
.toast-message { 
    flex: 1; 
    font-size: 0.9rem; 
    color: #000000; 
    padding: 0.5rem; 
} 
  
.toast.toast-success { 
    background: #95eab8; 
} 
  
.toast.toast-success .toast-progress { 
    background-color: #2ecc71; 
} 
  
.toast.toast-danger { 
    background: #efaca5; 
} 
  
.toast.toast-danger .toast-progress { 
    background-color: #e74c3c; 
} 
  
.toast.toast-info { 
    background: #bddaed; 
} 
  
.toast.toast-info .toast-progress { 
    background-color: #3498db; 
} 
  
.toast.toast-warning { 
    background: #ead994; 
} 
  
.toast.toast-warning .toast-progress { 
    background-color: #f1c40f; 
} 
  
@keyframes slideInRight { 
    0% { 
        transform: translateX(110%); 
    } 
  
    75% { 
        transform: translateX(-10%); 
    } 
  
    100% { 
        transform: translateX(0%); 
    } 
} 
  
@keyframes slideOutRight { 
    0% { 
        transform: translateX(0%); 
    } 
  
    25% { 
        transform: translateX(-10%); 
    } 
  
    100% { 
        transform: translateX(110%); 
    } 
} 
  
@keyframes fadeOut { 
    0% { 
        opacity: 1; 
    } 
  
    100% { 
        opacity: 0; 
    } 
} 
  
@keyframes toastProgress { 
    0% { 
        width: 100%; 
    } 
  
    100% { 
        width: 0%; 
    } 
}

Javascript

// script.js 
  
let icon = { 
    success: 
    '<span class="material-symbols-outlined">task_alt</span>', 
    danger: 
    '<span class="material-symbols-outlined">error</span>', 
    warning: 
    '<span class="material-symbols-outlined">warning</span>', 
    info: 
    '<span class="material-symbols-outlined">info</span>', 
}; 
  
const showToast = ( 
    message = "Sample Message", 
    toastType = "info", 
    duration = 5000) => { 
    if ( 
        !Object.keys(icon).includes(toastType)) 
        toastType = "info"; 
  
    let box = document.createElement("div"); 
    box.classList.add( 
        "toast", `toast-${toastType}`); 
    box.innerHTML = ` <div class="toast-content-wrapper"> 
                      <div class="toast-icon"> 
                      ${icon[toastType]} 
                      </div> 
                      <div class="toast-message">${message}</div> 
                      <div class="toast-progress"></div> 
                      </div>`; 
    duration = duration || 5000; 
    box.querySelector(".toast-progress").style.animationDuration = 
            `${duration / 1000}s`; 
  
    let toastAlready =  
        document.body.querySelector(".toast"); 
    if (toastAlready) { 
        toastAlready.remove(); 
    } 
  
    document.body.appendChild(box)}; 
  
let submit =  
    document.querySelector(".custom-toast.success-toast"); 
let information =  
    document.querySelector(".custom-toast.info-toast"); 
let failed =  
    document.querySelector(".custom-toast.danger-toast"); 
let warn =  
    document.querySelector(".custom-toast.warning-toast"); 
  
submit.addEventListener("click",(e) => { 
        e.preventDefault(); 
        showToast("Article Submitted Successfully","success",5000); 
    }); 
  
information.addEventListener("click",(e) => { 
        e.preventDefault(); 
        showToast("Do POTD and Earn Coins","info",5000); 
    }); 
  
failed.addEventListener("click",(e) => { 
        e.preventDefault(); 
        showToast("Failed unexpected error","danger",5000); 
    }); 
  
warn.addEventListener("click", (e) => { 
    e.preventDefault(); 
    showToast("!warning! server error","warning",5000); 
});