Create Toast Alert Dark Design in HTML & CSS

135
0

Hello friends, today in this blog, we will learn how to create a toast alert dark design in HTML & CSS. In our previous blog, we saw how to responsive navigation bar with a dropdown menu using JavaScript. You can check my other javascript projects after reading this blog.

Toast Alerts are a useful UI component for displaying important information to users. They are commonly used for notifications, messages, and alerts. In addition to being functional, they can also be designed to fit seamlessly into the overall visual style of a website or application. One popular design choice is a Dark Design, which uses a darker color palette to create a sleek and modern look. In this tutorial, we will walk through the process of creating a Toast Alert with a Dark Design using HTML, CSS, and a little bit of JavaScript. Whether you are new to web development or looking to expand your skills, this tutorial will guide you through the steps needed to create a functional and stylish Toast Alert that will elevate your user experience.

In this project[Toast Alert Dark Design], in the middle of the page there are two buttons as you can see below to show toast notifications. When you click on the green button success message will be shown. If you click on the red button the error message will be shown. If are you unable to understand what am I saying then check the live demo of this project.
Project Image

You may like these:

Note:
You can check live demo and download code files from here.

Code of HTML, CSS, and JavaScript Files

Here’s the good news: you don’t have to write all the code of this project from scratch! I have created a GitHub repository that contains all the HTML, CSS, and JavaScript code needed to build the app. You can check it out and use it as a starting point for your own project.

HTML Code

 <!DOCTYPE html>  
 <html lang="en">  
   <head>  
     <!-- ----------------- Created By Incoder ----------------- -->  
     <meta charset="utf-8">  
       <meta content="width=device-width, initial-scale=1.0" name="viewport">  
         <title>  
           Toast Alert - InCoderWeb  
         </title>  
         <link href="main.css" rel="stylesheet"/>  
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>  
       </meta>  
     </meta>  
   </head>  
   <body>  
     <div class="mainToastContainer">  
       <div class="toastWrapper success">  
         <div class="icon">  
           <i class="fa-solid fa-circle-check">  
           </i>  
         </div>  
         <div class="alertData">  
           <h4>  
             Success Alert  
           </h4>  
           <p>  
             Login Successfully Compeleted  
           </p>  
         </div>  
       </div>  
     </div>  
     <button class="alertBtn bg-success" id="successAlert">  
       Show Success Alert  
     </button>  
     <button class="alertBtn bg-danger" id="dangerAlert">  
       Show Error Alert  
     </button>  
     <script>  
       let mainToastContainer = document.querySelector(".mainToastContainer")  
          successAlert = document.querySelector("#successAlert")  
          dangerAlert = document.querySelector("#dangerAlert")  
          const showAlert = (type) => {  
                  if(!mainToastContainer.classList.contains("show")){  
                       if(type == "success"){  
                                 mainToastContainer.innerHTML = `<div class="toastWrapper ${type}">  
                           <div class="icon">  
                             <i class="fa-solid fa-circle-check">  
                             </i>  
                           </div>  
                           <div class="alertData">  
                             <h4>  
                               Success Alert  
                             </h4>  
                             <p>  
                               Login Successfully Compeleted  
                             </p>  
                           </div>  
                         </div>`  
                            console.log(type)  
                       } else{  
                            mainToastContainer.innerHTML = `<div class="toastWrapper ${type}">  
                      <div class="icon">  
                        <i class="fa-solid fa-circle-xmark">  
                        </i>  
                      </div>  
                      <div class="alertData">  
                        <h4>  
                          Error Alert  
                        </h4>  
                        <p>  
                          Login failed due to incorrect username or password  
                        </p>  
                      </div>  
                    </div>`  
                       }  
                       mainToastContainer.classList.add("show")  
                       setTimeout(() => {  
                            mainToastContainer.classList.remove("show")  
                       }, 2500)  
                  } else{  
                       mainToastContainer.classList.remove("show")  
                  }  
             }  
          successAlert.addEventListener("click", () => {  
               showAlert('success')  
          })  
          dangerAlert.addEventListener("click", () => {  
               showAlert('danger')  
          })  
     </script>  
   </body>  
 </html>  

CSS Code

@import url("https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&display=swap");  
 * {  
   margin: 0;  
   padding: 0;  
   box-sizing: border-box;  
   font-family: "Amaranth", sans-serif;  
 }  
 body {  
   width: 100vw;  
   height: 100vh;  
   display: flex;  
   align-items: center;  
   background: #110526;  
   justify-content: center;  
 }  
 .mainToastContainer {  
   top: 1rem;  
   right: -25rem;  
   position: fixed;  
   transition: right .6s cubic-bezier(0.25, 0.1, 0.15, 1.42);  
 }  
 .mainToastContainer.show {  
   right: 1rem;  
 }  
 .toastWrapper {  
   width: 20rem;  
   height: 5rem;  
   display: flex;  
   overflow: hidden;  
   position: relative;  
   align-items: center;  
   margin-block: .8rem;  
   border-radius: .5rem;  
   background: rgb(255 255 255 / 8%);  
 }  
 .toastWrapper::before {  
   top: 0;  
   left: -45rem;  
   width: 52rem;  
   content: "";  
   height: 100%;  
   position: absolute;  
 }  
 .toastWrapper.success::before {  
   background: linear-gradient(to right, rgb(43 198 111 / 80%) 25%, transparent);  
 }  
 .toastWrapper.danger::before {  
   background: linear-gradient(to right, rgb(226 45 59 / 80%) 25%, transparent);  
 }  
 .toastWrapper.success .icon {  
   color: rgb(43 198 111)  
 }  
 .toastWrapper.success h4 {  
   font-size: 1rem;  
   color: rgb(43 198 111)  
 }  
 .toastWrapper.danger .icon {  
   color: rgb(226 45 59)  
 }  
 .toastWrapper.danger h4 {  
   font-size: 1rem;  
   color: rgb(226 45 59)  
 }  
 .toastWrapper p {  
   font-size: .79rem;  
   margin-top: .2rem;  
   color: rgb(255 255 255 / 50%)  
 }  
 .toastWrapper .icon {  
   font-size: 1.4rem;  
   margin-right: 1rem;  
   margin-left: 1.5rem;  
 }  
 .alertBtn {  
   height: 2.5rem;  
   cursor: pointer;  
   font-weight: 550;  
   padding: 0rem 1rem;  
   letter-spacing: 1px;  
   border-radius: .5rem;  
   margin-right: 1rem;  
   background: transparent;  
   transition: all .3s ease;  
 }  
 .alertBtn:hover {  
   color: #ffffff;  
 }  
 .bg-success {  
   color: rgb(43 198 111 / 80%);  
   border: 2px solid rgb(43 198 111 / 80%);  
 }  
 .alertBtn.bg-success:hover {  
   background: rgb(43 198 111 / 80%);  
 }  
 .alertBtn.bg-danger:hover {  
   background: rgb(226 45 59 / 80%);  
 }  
 .bg-danger {  
   color: rgb(226 45 59 / 80%);  
   border: 2px solid rgb(226 45 59 / 80%);  
 }  
Ashutosh Tiwari
WRITTEN BY

Ashutosh Tiwari

Hey there, I'm Ashutosh Tiwari AKA InCoder and I'm a front-end and back-end developer. I create blogs, and I love helping people through my knowledgeable content. My content is all about coding and front-end design. When I'm not creating content, you can find me reading books and listening to podcasts. I set up this Buy Me a Coffee account to help support my work, as creating content takes time and effort. Every contribution helps me continue doing what I love and improving the quality of my content. Thank you so much for your support and for being a part of my journey!

Newsletter

Loading