Back

Building an Elegant Floating Snackbar Notification

A detailed guide to creating a modern, dynamic snackbar notification that enhances user experience with smooth animations and aesthetic design.

HTML

The HTML structure for our floating snackbar is simple yet functional. It consists of a div element to display the snackbar message and a button to trigger the display of the snackbar.

<div id="snackbar" class="snackbar">This is a snackbar notification</div>
<button onclick="showSnackbar()" class="snackbar-button">Show Snackbar</button>

CSS

To achieve a sleek design, our CSS styles ensure that the snackbar looks modern and professional. The snackbar div is initially hidden, positioned at the bottom center with smooth transition effects, creating a floating effect when it becomes visible. We use simple styling to create a distinct button that fits well with the overall design.

.snackbar {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  transition: visibility 0s, opacity 0.5s linear;
}
.snackbar.show {
  visibility: visible;
  opacity: 1;
}
.snackbar-button {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 20px 10px;
  cursor: pointer;
  border-radius: 8px;
}

JavaScript

Our JavaScript function is straightforward. It adds a 'show' class to the snackbar when the button is clicked, causing the snackbar to appear. The snackbar is designed to automatically disappear after a few seconds, restoring its initial hidden state.

function showSnackbar() {
  let snackbar = document.getElementById('snackbar');
  snackbar.className = 'snackbar show';
  setTimeout(function() {
    snackbar.className = snackbar.className.replace('show', '');
  }, 3000);
}

Responsive Design

Ensuring that the snackbar is responsive is critical. Leveraging CSS's flexbox and media queries ensures that our component adapts to various screen sizes seamlessly; it remains centered and maintains its size relative to the viewport. You can further customize the padding and minimum width using CSS media queries to enhance responsiveness.

Advanced Customizations

The snackbar can be customized in numerous ways to match the theme of your web application. You can adjust colors, text styles, and animations to make it look cohesive with your design. Consider adding features like swipe-to-dismiss on mobile devices for improved user experience. For accessibility, ensure text contrast meets WCAG standards and consider adding an 'aria-live' attribute for screen-readers.

Conclusion

The floating snackbar notification is an essential UI component for providing alerts and feedback to users in a non-intrusive manner. It fits perfectly in situations where brief notifications are needed, like form submissions or error messages. With simple adjustments and enhancements, this component can significantly boost the interactivity and accessibility of your applications.

Whole code

<div id="snackbar" class="snackbar">This is a snackbar notification</div>
<button onclick="showSnackbar()" class="snackbar-button">Show Snackbar</button>

<script>
function showSnackbar() {
  let snackbar = document.getElementById('snackbar');
  snackbar.className = 'snackbar show';
  setTimeout(function() {
    snackbar.className = snackbar.className.replace('show', '');
  }, 3000);
}
</script>

<style>
.snackbar {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
  transition: visibility 0s, opacity 0.5s linear;
}
.snackbar.show {
  visibility: visible;
  opacity: 1;
}
.snackbar-button {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 20px 10px;
  cursor: pointer;
  border-radius: 8px;
}
</style>

Thank you for reading this article.

Building an Elegant Floating Snackbar Notification

HTML

CSS

JavaScript

Responsive Design

Advanced Customizations

Conclusion

Whole code

Comments

More snackbars

Similar

See also