Professional Web Templates

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body {
  background: #000;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
button {
  padding: 8px 20px;
    border: 0;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
}
#success {
  background: #0abf30;
}
#error {
  background: #f24d4c;
}
#warning {
  background: #e9bd0c;
}
#info {
  background: #3498db;
}
.notifications{
  position: fixed;
  top: 30px;
  right: 20px;
}
.toast{
  position: relative;
  padding: 10px;
  color: #fff; 
  margin-bottom: 10px; 
  width: 400px; 
  display: grid;
  grid-template-columns: 70px 1fr 70px; 
  border-radius: 5px;
   --color: #0abf30;
  background-image: linear-gradient(
  to right, #0abf3055, #22242f 30%);
  animation: show 0.3s ease 1 forwards;
}

.toast i{
  color: var(--color);
}
.toast .title{
  font-size: x-large;
  font-weight: bold;
}

@keyframes show{
    0%{
      transform: translateX(100%);
    }
    40%{
      transform: translateX(-5%);
    }
    80% {
      transform: translateX(8%);
    }
    100% {
      transform: translateX(-10%);
    }
}
.toast i{
  color: var(--color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: x-large;
}

.toast title{
  font-size: x-large;
font-weight: bold;
}

.toast span, .toast i:nth-child(3){
  color: #fff;
opacity: 0.6;
}
.toast::before{
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--color);
  width: 100%;
  height: 3px;
  content: '';
  animation: timeOut 5s linear 1 forwards;
}
@keyframes timeOut{
  to{
    width: 0;
  }
}
.toast.error{
  --color: #f24d4c;
  background-image:
  linear-gradient(to right, #f24d4c55, #22242F 30%);
}
.toast.warning{
  --color: #e9bd0c;
  background-image:linear-gradient(to right, #e9bd8c55, #22242F 38%);
}
.toast.info{
  --color: #3498db;
  background-image:linear-gradient(to right, #3498db55, #22242F 30%);
}

JS

let notifications = document.querySelector('.notifications'); 
let success = document.getElementById('success'); 
let error = document.getElementById('error'); 
let warning = document.getElementById('warning'); 
let info = document.getElementById('info');

// Append toast to notifications container
    notifications.appendChild(newToast);

// Close toast on click
    newToast.querySelector('.close-toast').addEventListener('click', () => {
        newToast.remove();
    });

// Auto remove toast after 3 seconds
    setTimeout(() => {
        newToast.remove();
    }, 3000);
}

success.onclick = function () {
    createToast('success', 'fa-solid fa-circle-check', 'Success', 'This is a success toast.');
};

warning.onclick = function () {
    createToast('warning', 'fa-solid fa-triangle-exclamation', 'Warning', 'This is a warning toast.');
};

error.onclick = function () {
    createToast('error', 'fa-solid fa-circle-exclamation', 'Error', 'This is an error toast.');
};

info.onclick = function () {
    createToast('info', 'fa-solid fa-circle-info', 'Info', 'This is an info toast.');
};

HTML

CSS

JS

Output