Open In App

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

Last Updated : 23 Aug, 2024
Summarize
Comments
Improve
Suggest changes
Share
1 Like
Like
Report

A Toast Notification is a small, non-intrusive popup message that briefly appears on the screen to provide feedback or updates. 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. Typically used for alerts or confirmations, it fades away automatically after a few seconds. You can create it using simple HTML, CSS for styling, and JavaScript for functionality.

Final Output

ToastOutput-(1)
Output Preview

Prerequisites

Approach

  • HTML Structure: The HTML defines a .toast-buttons container with buttons for different toast types, and an empty .toast-overlay for displaying notifications.
  • CSS - Toast Styling: The .toast container is styled with a fixed position, smooth entrance animations (slideInRight), and a disappearing effect (fadeOut).
  • CSS - Progress Bar and Transitions: The .toast-progress bar shows duration using width animation (toastProgress), while .toast-success, .toast-danger, etc., apply distinct background colors.
  • JavaScript - Toast Logic Initialization: The showToast function creates a dynamic .toast element based on the button clicked, customizing its type, message, and duration.
  • JavaScript - Handling Multiple Toasts: If a toast is already visible, it is removed before displaying a new one, ensuring only one notification is active at once.
  • JavaScript - Event Listeners for Buttons: Event listeners are attached to buttons, triggering the appropriate showToast call with customized messages, icons, and styles for each notification type.

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 JavaScript

Output:


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

Similar Reads