Back

Sleek Dark Snackbar Notification

A comprehensive tutorial on creating an elegant dark-themed snackbar that appears on command and automatically dismisses after 3 seconds.

HTML

The HTML structure is straightforward. We need a button element with an onclick event to trigger the snackbar, and a div element with the id "snackbar" that contains our notification text.

        <button onclick="openSnackbar()">Open snackbar</button>
        <div id="snackbar">
          <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
        </div>

JavaScript

With JavaScript, we'll control the visibility of our snackbar by adding an "active" class to the "#snackbar" element when the button is clicked. First, we select the snackbar element by its ID and add the "active" class to make it visible. Then, we use the setTimeout() method to automatically remove the "active" class after 3 seconds, which hides the snackbar.

        function openSnackbar() {
          let snackbar = document.getElementById('snackbar')

          // Activate snackbar
          snackbar.classList.add('active')

          setTimeout(() => {
            // Deactivate snackbar (after 3000ms - 3 seconds)
            snackbar.classList.remove('active')
          }, 3000);
        }

CSS

Now let's style our snackbar element to create a sleek notification. We'll position it at the bottom center of the screen by setting its position to absolute, bottom to 0, and left to 50%. The transform property with translateX(-50%) ensures perfect horizontal centering. We'll add margin for spacing and appropriate padding for interior spacing. For the visual design, we'll use a dark gray background (#333) with a contrasting pink text color, set the width to 200px, and add rounded corners with border-radius. Initially, we'll hide the snackbar by setting the display property to none.

        #snackbar {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            margin: 10px;
            background-color: #333;
            padding: 10px 20px;
            width: 200px;
            border-radius: 5px;
            color: rgb(249, 129, 129);
            display: none;
        }

Finally, we need to style the "active" class that will be toggled by our JavaScript function. When this class is applied, we want to override the display property and make the snackbar visible by setting it to block. The !important rule is necessary to ensure our style takes precedence over the ID selector's higher specificity.


        .active {
            display: block !important;
        }

And with that, you have a fully functional, elegant dark snackbar notification system that can be easily integrated into any web application.

Whole code

<button onclick="openSnackbar()">Open snackbar</button>
<div id="snackbar">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
</div>

<script>
function openSnackbar() {
  let snackbar = document.getElementById('snackbar')
  snackbar.classList.add('active')
  setTimeout(() => {
    snackbar.classList.remove('active')
  }, 3000);
}
</script>

<style>
#snackbar {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 10px;
  background-color: #333;
  padding: 10px 20px;
  width: 200px;
  border-radius: 5px;
  color: rgb(249, 129, 129);
  display: none;
}
.active {
  display: block !important;
}
</style>

Sleek Dark Snackbar Notification

HTML

JavaScript

CSS

Whole code

Comments

More snackbars

Similar

See also