Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

Creating Snackbar using HTML, CSS and Javascript

HTML CSS Front End Technology Web Development

Snackbars are notification bars that appear at the bottom of a web page to display an important message, usually to confirm an action or provide feedback to the user. They are displayed on the screen for a few seconds and then disappear automatically. They are an essential element of user interface design and are widely used in web applications.

Syntax

A basic snackbar consists of HTML structure, CSS styling for positioning and animations, and JavaScript for show/hide functionality 

.snackbar {
    visibility: hidden;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 16px;
    border-radius: 4px;
}

.snackbar.show {
    visibility: visible;
    animation: fadein 0.5s;
}

Method 1: Basic Snackbar

This example creates a simple snackbar that appears for 3 seconds when the button is clicked 

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        background-color: lavender;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
    }

    .button {
        padding: 12px 24px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
    }

    #snackbar {
        visibility: hidden;
        min-width: 250px;
        margin-left: -125px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
    }

    #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>
    <h1>Basic Snackbar</h1>
    <button class="button" onclick="showSnackbar()">Show Snackbar</button>
    <div id="snackbar">Welcome to TutorialsPoint!</div>

    <script>
        function showSnackbar() {
            var snackbar = document.getElementById("snackbar");
            snackbar.className = "show";
            setTimeout(function(){ 
                snackbar.className = snackbar.className.replace("show", ""); 
            }, 3000);
        }
    </script>
</body>
</html>

A green button appears on a lavender background. When clicked, a dark snackbar with white text slides up from the bottom, displays "Welcome to TutorialsPoint!" for 3 seconds, then fades away.

Method 2: Snackbar with Dismiss Action

This example adds a dismiss button to allow users to close the snackbar immediately 

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100vh;
        margin: 0;
        background-color: lavender;
        font-family: Arial, sans-serif;
    }

    .button {
        padding: 12px 24px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
    }

    #snackbar {
        visibility: hidden;
        min-width: 300px;
        margin-left: -150px;
        background-color: #333;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        padding: 16px;
        position: fixed;
        z-index: 1;
        left: 50%;
        bottom: 30px;
        font-size: 16px;
    }

    #snackbar.show {
        visibility: visible;
        animation: fadein 0.5s;
    }

    @keyframes fadein {
        from {bottom: 0; opacity: 0;}
        to {bottom: 30px; opacity: 1;}
    }

    #snackbarAction {
        color: #fff;
        cursor: pointer;
        border-radius: 2px;
        padding: 4px 8px;
        font-size: 14px;
        background-color: #5f5f5f;
        display: inline-block;
        margin-left: 16px;
        border: none;
    }

    #snackbarAction:hover {
        background-color: #4d4d4d;
    }
</style>
</head>
<body>
    <h1>Snackbar with Dismiss Action</h1>
    <button class="button" onclick="showSnackbar()">Show Snackbar</button>
    <div id="snackbar">
        Message sent successfully!
        <button id="snackbarAction" onclick="dismissSnackbar()">Dismiss</button>
    </div>

    <script>
        function showSnackbar() {
            var snackbar = document.getElementById("snackbar");
            snackbar.className = "show";
        }

        function dismissSnackbar() {
            var snackbar = document.getElementById("snackbar");
            snackbar.className = "";
        }
    </script>
</body>
</html>

A snackbar appears with the message "Message sent successfully!" and includes a gray "Dismiss" button. Users can either wait for it to stay visible or click "Dismiss" to close it immediately.

Method 3: Styled Custom Snackbar

This example shows a more visually appealing snackbar with custom colors and smooth animations 

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-color: lavender;
        flex-direction: column;
        font-family: Arial, sans-serif;
    }

    .button {
        padding: 12px 24px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        cursor: pointer;
    }

    .snackbar {
        background-color: #2196F3;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 25px;
        padding: 16px 24px;
        width: 320px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 1;
        animation: slideIn 0.5s ease-in-out;
    }

    .snackbar.hidden {
        display: none;
    }

    .snackbar button {
        background-color: rgba(255, 255, 255, 0.2);
        color: #fff;
        border: none;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        margin-left: 10px;
    }

    .snackbar button:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }

    @keyframes slideIn {
        from {
            bottom: -100px;
            opacity: 0;
        }
        to {
            bottom: 20px;
            opacity: 1;
        }
    }
</style>
</head>
<body>
    <h1>Custom Styled Snackbar</h1>
    <button class="button" onclick="showSnackbar()">Show Snackbar</button>
    <div id="snackbar" class="snackbar hidden">
        <span>File uploaded successfully!</span>
        <button onclick="hideSnackbar()">?</button>
    </div>

    <script>
        function showSnackbar() {
            var snackbar = document.getElementById("snackbar");
            snackbar.classList.remove("hidden");
            setTimeout(function(){ 
                snackbar.classList.add("hidden"); 
            }, 4000);
        }

        function hideSnackbar() {
            var snackbar = document.getElementById("snackbar");
            snackbar.classList.add("hidden");
        }
    </script>
</body>
</html>

A blue rounded snackbar slides up from the bottom with the message "File uploaded successfully!" and a close button (?). The snackbar has a modern design with smooth animations and disappears after 4 seconds or when the close button is clicked.

Conclusion

Snackbars provide an effective way to display brief, non-intrusive notifications to users. They should contain concise messages, be easily dismissible, and automatically disappear after a short duration to maintain good user experience.

Updated on: 2026-03-15T17:34:24+05:30

1K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements