Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create Snackbar Toast with CSS and 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 vanish after some time. The snackbar appears to fadein and fadesout after some time. Let us see how to create a snackbar on the click of a button with CSS and JavaScript.
Create a button for the snackbar
For the snackbar to appear, you need to click on a button. Create a button using the <button> element −
<button class="snackBtn">Show Snackbar</button> <h2>Click on the above button to see snackbar message</h2>
Set the snackbar text
The snackbar text that appears when the snackbar button is clicked −
<div class="snackText">Apply the coupon code AMIT15 to get 15% Off.</div>
Style the snackbar text
The snackbar is by default hidden and appears when the button is clicked. Therefore, set the visibility property to hidden for the text. Also, the fixed position is set using the position property with the value fixed −
.snackText {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: rgb(110, 26, 106);
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
The script
The following is the script to make the snackbar appear and then vanish. On the click of a button, the snackbar will appear and vanish after 3 seconds. We have set 3000 millioseconds here i.e. 3 seconds −
<script>
document
.querySelector(".snackBtn")
.addEventListener("click", showSnackBar);
function showSnackBar() {
var x = document.querySelector(".snackText");
x.className += " show";
setTimeout(function() {
x.className = x.className.replace("show", "");
}, 3000);
}
</script>
Display the snacktext
We have set the snacktext to be invisible above, but on the click of a button it will appear. To achieve this, we have set the visibility property to visible −
.snackText.show {
visibility: visible;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
Example
To create a snackbar/toast with CSS and JavaScript, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.snackText {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: rgb(110, 26, 106);
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
.snackBtn {
border: none;
padding: 10px;
font-size: 18px;
background-color: rgb(92, 0, 128);
color: white;
}
.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 / Toast Example</h1>
<button class="snackBtn">Show Snackbar</button>
<h2>Click on the above button to see snackbar message</h2>
<div class="snackText">Apply the coupon code AMIT15 to get 15% Off.</div>
<script>
document
.querySelector(".snackBtn")
.addEventListener("click", showSnackBar);
function showSnackBar() {
var x = document.querySelector(".snackText");
x.className += " show";
setTimeout(function() {
x.className = x.className.replace("show", "");
}, 3000);
}
</script>
</body>
</html>
642 Views
