How to make a Toast Notification in HTML CSS and JavaScript ?
Last Updated :
23 Aug, 2024
Improve
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
.png)
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.
<!-- 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>
/* 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%;
}
}
// 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);
});
Output:
