How To Create Toastify Effect Using HTML, CSS and JavaScript

Hi guys I am back with another fantastic project in this project I created a Toastify Effect Using HTML, CSS & JavaScript.

I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.

Table of Content

  1. Toastify Effect
  2. About this Project
  3. How to create Toastify Effect
  4. Video
  5. HTML file (source code)
  6. CSS file (source code)
  7. JavaScript file (source code)
  8. Related Content

Toastify Effect

The Toastify Effect is a transition that can be used to animate the appearance and disappearance of toast notifications in React applications. It is part of the Toastify library, a lightweight JavaScript library that makes adding toast notifications to your React applications easy.

The Toastify Effect has four built-in transitions:

  • Bounce
  • Slide
  • Zoom
  • Flip

You can also use your own custom transition by providing a CSS animation name or a JS function.

To use the Toastify Effect, you must install the Toastify library and import it into your React application. You can then use the toastify function to create toast notifications and specify the transition prop to use the Toastify Effect.

This Toastify effect is created by only HTML, CSS, and JavaScript

About This Project

This project was created by the codingpakistan team to help students learn coding and programming in a simple way. If you want to join our team please follow us on Instagram.

Created byCoding Pakistan
Languages HTML / CSS / JS
Source CodeAvailable Below
PreviewTake Preview

How to Create a Toastify Effect

There are some steps to create this type of Toastify Effect HTML, CSS, and JavaScript that are given below.

  1. The first step is to create one folder.
  2. Open this folder in Vs Code Editor and create three files in HTML, CSS, and JavaScript.
  3. Make sure the HTML file extension is (.html), the CSS file extension is (.css) and the JavaScript file extension is (.js)
  4. After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
  5. The last step is copying and pasting the given code into your files.


Toastify Effect Using HTML, CSS, and JSSource Code


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="" />
    <link rel="preconnect" href="" crossorigin />
    <link rel="stylesheet" href="style.css" />
    <button class="rerun-button" onclick="rerun()">
    <div class="card">
      <div class="table" id="table"></div>
    <script src="script.js"></script>


body {
    margin: 0;
    display: grid;
    place-items: center;
    background: #f2f2ff;
    color: #4c4654;
    font-family: "Euclid Circular A", "Poppins";
  * {
    box-sizing: border-box;
  body {
    height: 100%;
  .card {
    width: 500px;
    padding: 20px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 20px 40px rgb(0 0 0 / 4%);
    transition: 0.3s;
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    background: #8f44fd;
    color: #f7f7f7;
    height: 36px;
    border-radius: 4px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
  .table {
    overflow: hidden;
    display: grid;
    transition: 0.3s;
  .table.empty {
    max-height: 0;
    padding: 0;
  .row {
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 40px;
    align-content: center;
    max-height: 54px;
    padding: 8px 0;
    transition: 0.3s;
  .row.removed {
    max-height: 0;
    opacity: 0;
    padding: 0;
    visibility: hidden;
  .row p {
    margin: auto 0;
    color: rgb(76 70 84 / 75%);
  .rerun-button {
    position: fixed;
    top: 20px;
    left: 50%;
    translate: -50% 0;
    width: 100px;
    text-align: center;
  .row button {
    display: grid;
    place-items: center;
    border: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 6px;
    background: transparent;
    color: #222222;
    cursor: pointer;
    transition: 0.3s;
  .row button:hover {
    background: #f8f8f8;
  body .toastify {
    padding: 20px 50px;
    margin-bottom: 30px;
    font-size: 18px;
    background: #ff5362;
    box-shadow: 0 20px 40px rgb(0 0 0 / 4%);
    border-radius: 10px;

JavaScript FILE

const rows = ["Adidas Superstar", "Nike Air Force", "Reebok Classic"];

const table = document.querySelector("#table");

let rowCount = rows.length;

const rerun = () => {

const removeRow = (index) => {
  const row = document.querySelector(`#row-${index}`);
  rowCount -= 1;

  if (rowCount === 0) {

    text: "Product Deleted",
    duration: 1500,
    gravity: "bottom",
    position: "center",
    stopOnFocus: true,

const buildRows = () => {
  let content = ``;

  rows.forEach((row, index) => {
    content += `
      <div class="row" id="row-${index}">
        <button onclick="removeRow(${index})">
            <span class="material-symbols-outlined"> close </span>

  console.log("content", content);

  table.innerHTML = content;

window.addEventListener("load", () => buildRows());

Related Content

  1. How to Create Fading Tabs Using HTML, CSS, and JavaScript
  2. Profile Card Using HTML and CSS – Part 01
  3. How to Create Drop-Down Menu Using HTML and CSS – Part 01

Leave a Comment