How to create a Snackbar using HTML, CSS & JavaScript?

Last Updated : 30 Jul, 2024

Snackbar or toast notifications are brief messages that pop up on a webpage to convey information or feedback to users. They are versatile tools for signaling different states, like success, error, or invalid input, and can appear at various positions on the screen.

Approach:

First, create a basic HTML structure for your need and create a container to hold the buttons and toast for notifications you can add buttons for different types of notifications.
Then style the buttons with different colors for success, error, and invalid notification using CSS.
In the Javascript part first, take the reference for all the needed IDs and classes. And define messages for each type of notification.
After that create a function to display the toast notifications and append the toast to the container using the appendChild() method.
You can create a close button for manual dismissal. Set a timeout using the setTimeout() method to automatically remove the toast after a few seconds. Add event listeners to the buttons to trigger the toast notifications on click.

Example : The example below shows how to create a snackbar or toast using CSS and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snackbar Notifications</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <h2 id="h2">GeeksforGeeks - Snackbar using HTML, CSS & JS</h2>
        <button class="btn btn-lg" onclick="showSnackbar()">Show Snackbar</button>
    </div>
    <div class="toastBox"></div>
    <script src="index.js"></script>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

body {
    background: #f7edff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    text-align: center;
}

#h2 {
    margin-bottom: 20px;
}

button.btn {
    background: #333;
    color: #fff;
    border: 0;
    outline: 0;
    width: 120px;
    height: 40px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

button.btn:hover {
    opacity: 0.8;
}

.toastBox {
    position: fixed;
    top: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    overflow: hidden;
    padding: 20px;
}

.toast {
    width: 400px;
    height: 80px;
    background: #fff;
    font-weight: 500;
    margin: 15px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    position: relative;
    transform: translateX(100%);
    animation: moveleft 0.5s linear forwards;
}

@keyframes moveleft {
    100% {
        transform: translateX(0);
    }
}

.toast i {
    margin: 0 20px;
    font-size: 35px;
    color: green;
}

.toast::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background: green;
    animation: anim 5s linear forwards;
}

@keyframes anim {
    100% {
        width: 0;
    }
}

.close-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.close-btn i {
    color: #666;
}