Toast Notification

Create A Toast Notification (HTML, CSS, JavaScript)

Table of Contents

Toast notifications are popular ways to provide feedback or alerts on websites. This article will teache you how to make your own toast notifications in HTML, CSS, and JavaScript.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DZCoding | Toast Notification</title>
    <link rel="stylesheet" href="css/toast.css">
    <link rel="stylesheet" href="css/boxicons.min.css">
</head>
<body>
    <div class="toast">
        <div class="content">
            <i class='bx bxs-check-circle'></i>
            <div class="msg">
                <span class="text text1">Success</span>
                <span class="text text2">These is a success message</span>
            </div>
        </div>
        <i class='bx bx-x-circle'></i>
    </div>

    <button class="btn-success">Success</button>

    <script src="js/toast.js"></script>
</body>
</html>

CSS Code

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ecf0f1;
    overflow: hidden;
}

.btn-success{
    padding: 5px;
    background-color: #2ecc71;
    color: #fff;
    border: none;

}

.toast{
    position: fixed;
    top: 15px;
    right: 15px;
    padding: 20px 30px;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    border-left: 5px solid #2ecc71;
    transform: translateX(calc(100% + 15px));
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.toast.show{
    transform: translateX(0%);
}


.toast .content{
    display: flex;
    align-items: center;
}

.toast .content .bxs-check-circle{
    color: #2ecc71;
    font-size: 40px;
    
} 

.toast .content .msg{
    display: flex;
    flex-direction: column;
    margin:0 20px;
}

.toast .content .msg .text1{
    font-size: 18px;
    font-weight: bold;
    color: #7f8c8d;
}
.toast .content .msg .text2{
    font-size: 16px;
    color: #95a5a6;
}

.toast .bx-x-circle{
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 5px;
    cursor: pointer;
    color: #7f8c8d;
}

JAVASCRIPT Code

const btnsuccess = document.querySelector(".btn-success"),
      toast = document.querySelector(".toast"),
      btnclose = document.querySelector(".bx-x-circle");

      btnsuccess.addEventListener("click", () =>{toast.classList.add("show")});
      btnclose.addEventListener("click", () => {toast.classList.remove("show")});
Live Preview
Tags

Related Posts