Notification Panel

In this article, we are going to build a notification panel style with CSS and will toggle the button with JS. It's very simple to do.

Jatin Sharma

Jan 22, 2022

2 min read·276 words

In this article, we are going to build a notification panel style with CSS and will toggle the button with JS. It's very simple to do, just follow the below code.

Preview

preview

Requirements-

To get all the icons you can Sign Up to the FontAwesome. It has various types of icons that are free to use, you can also upgrade to the paid version if needed.

HTML

index.html

<div class="container">
  <button class="icon">
    <i class="fas fa-wifi"></i>
  </button>
</div>

<div class="container">
  <button class="icon">
    <i class="fas fa-wifi"></i>
  </button>
</div>

I'm showing just a single icon button (.icon), but there are more than just one. And you can add as many you want.

CSS

styles.css

:root {
  --icon-bg: #212121;
  --icon-fg: gray;
}
 
* {
  margin: 0;
  padding: 0;
}
 
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
 
.icon {
  all: unset; /_ removing all the pre defined style _/
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  padding: 0.5rem;
  border-radius: 999px;
 
  display: grid; /_ making icon center horizontally and vertically _/
  place-items: center;
 
  background: var(--icon-bg);
  color: var(--icon-fg);
  border: 2px solid transparent;
 
  transition: background 200ms ease-in-out;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /_ Removing Blue Highlight box _/
}
 
/* To Prevent Hover on smaller Devices */
@media screen and (min-width: 500px) {
  .icon:hover {
    border: 2px solid white;
    box-shadow: 0 0 20px -5px white;
  }
  /* Change the bg and fg */
  .active-icon {
    --icon-bg: white;
    --icon-fg: black;
  }
}

:root {
  --icon-bg: #212121;
  --icon-fg: gray;
}
 
* {
  margin: 0;
  padding: 0;
}
 
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
 
.icon {
  all: unset; /_ removing all the pre defined style _/
  font-size: 1.4rem;
  width: 40px;
  height: 40px;
  padding: 0.5rem;
  border-radius: 999px;
 
  display: grid; /_ making icon center horizontally and vertically _/
  place-items: center;
 
  background: var(--icon-bg);
  color: var(--icon-fg);
  border: 2px solid transparent;
 
  transition: background 200ms ease-in-out;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /_ Removing Blue Highlight box _/
}
 
/* To Prevent Hover on smaller Devices */
@media screen and (min-width: 500px) {
  .icon:hover {
    border: 2px solid white;
    box-shadow: 0 0 20px -5px white;
  }
  /* Change the bg and fg */
  .active-icon {
    --icon-bg: white;
    --icon-fg: black;
  }
}

Javascript

script.js

const icons = document.querySelectorAll(".icon");
// Adding an event listener to the icons to change the active status
icons.forEach((icon) =>
  icon.addEventListener("click", () => {
    icon.classList.toggle("active-icon");
  })
);

const icons = document.querySelectorAll(".icon");
// Adding an event listener to the icons to change the active status
icons.forEach((icon) =>
  icon.addEventListener("click", () => {
    icon.classList.toggle("active-icon");
  })
);