Article Categories

Selected Reading

How to create a snackbar / toast with CSS and JavaScript?

CSS Web Development Front End Technology Javascript

If you want to show notifications to the user about any information, such as a coupon for buying the product, you can create a snackbar. Use them as popups to display a message at the bottom of the screen. Generally, the snackbar vanishes after some time with fade-in and fade-out animations. Let us see how to create a snackbar on the click of a button with CSS and JavaScript.

Syntax

.snackbar {
    visibility: hidden;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

Create the HTML Structure

First, create a button to trigger the snackbar and the snackbar element itself −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        padding: 20px;
    }
    
    .snackBtn {
        border: none;
        padding: 12px 20px;
        font-size: 16px;
        background-color: #1976d2;
        color: white;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .snackBtn:hover {
        background-color: #1565c0;
    }
    
    .snackText {
        visibility: hidden;
        min-width: 300px;
        background-color: #333;
        color: white;
        text-align: center;
        border-radius: 4px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        font-size: 16px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .snackText.show {
        visibility: visible;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
    
    @keyframes fadein {
        from {
            bottom: 0;
            opacity: 0;
        }
        to {
            bottom: 30px;
            opacity: 1;
        }
    }
    
    @keyframes fadeout {
        from {
            bottom: 30px;
            opacity: 1;
        }
        to {
            bottom: 0;
            opacity: 0;
        }
    }
</style>
</head>
<body>
    <h1>Snackbar Demo</h1>
    <p>Click the button below to show a snackbar notification:</p>
    <button class="snackBtn">Show Snackbar</button>
    
    <div class="snackText">Apply coupon code SAVE20 to get 20% off!</div>
    
    <script>
        document.querySelector(".snackBtn").addEventListener("click", showSnackBar);
        
        function showSnackBar() {
            var snackbar = document.querySelector(".snackText");
            snackbar.classList.add("show");
            
            setTimeout(function() {
                snackbar.classList.remove("show");
            }, 3000);
        }
    </script>
</body>
</html>

A button labeled "Show Snackbar" appears on the page. When clicked, a dark rounded notification bar slides up from the bottom center of the screen displaying "Apply coupon code SAVE20 to get 20% off!" and automatically disappears after 3 seconds with fade animations.

Key Properties Explained

Property	Purpose
`position: fixed`	Positions snackbar relative to viewport
`visibility: hidden`	Hides snackbar initially
`transform: translateX(-50%)`	Centers snackbar horizontally
`z-index: 1`	Ensures snackbar appears above other content

Example: Different Snackbar Types

You can create different styled snackbars for various notification types −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        padding: 20px;
    }
    
    .btn {
        padding: 10px 16px;
        margin: 5px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }
    
    .success-btn { background: #4caf50; color: white; }
    .error-btn { background: #f44336; color: white; }
    .info-btn { background: #2196f3; color: white; }
    
    .snackbar {
        visibility: hidden;
        min-width: 300px;
        text-align: center;
        border-radius: 4px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        transform: translateX(-50%);
        font-size: 16px;
    }
    
    .success { background: #4caf50; color: white; }
    .error { background: #f44336; color: white; }
    .info { background: #2196f3; color: white; }
    
    .snackbar.show {
        visibility: visible;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }
    
    @keyframes fadein {
        from { bottom: 0; opacity: 0; }
        to { bottom: 30px; opacity: 1; }
    }
    
    @keyframes fadeout {
        from { bottom: 30px; opacity: 1; }
        to { bottom: 0; opacity: 0; }
    }
</style>
</head>
<body>
    <h2>Different Snackbar Types</h2>
    <button class="btn success-btn" onclick="showSnack('success')">Success Message</button>
    <button class="btn error-btn" onclick="showSnack('error')">Error Message</button>
    <button class="btn info-btn" onclick="showSnack('info')">Info Message</button>
    
    <div id="snackbar" class="snackbar"></div>
    
    <script>
        function showSnack(type) {
            var snackbar = document.getElementById("snackbar");
            var messages = {
                success: "? Operation completed successfully!",
                error: "? Something went wrong. Please try again.",
                info: "? Here's some useful information."
            };
            
            snackbar.textContent = messages[type];
            snackbar.className = "snackbar " + type + " show";
            
            setTimeout(() => {
                snackbar.classList.remove("show");
            }, 3000);
        }
    </script>
</body>
</html>

Three colored buttons appear: green "Success Message", red "Error Message", and blue "Info Message". Clicking each shows a corresponding colored snackbar with appropriate icons and messages that fade in and out from the bottom of the screen.

Conclusion

CSS snackbars provide an effective way to show temporary notifications to users. By combining CSS positioning, animations, and JavaScript event handling, you can create professional-looking toast messages that enhance user experience.

AmitDiwan

Updated on: 2026-03-15T14:56:36+05:30

761 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next