Neon notification card

index.html

<div class="noti">
  <div class="notiglow"></div>
  <div class="notiborderglow"></div>
  <div class="notititle">Restart Completed</div>
  <div class="notibody">Server restarted successfully in 58 seconds and is back online</div>
</div>

<a class="note" href="https://codepen.io/cleveryeti/pen/JjwNqgP" target="_blank">note: there is a new version of this with animations and support for multiple notifications. Click here to open it</a>

neon-notification-card.markdown

Neon notification card

A Pen by CleverYeti on CodePen.

License.

script.js

const el = document.querySelector(".noti")
const glowEl = document.querySelector(".notiglow")
const borderEl = document.querySelector(".notiborderglow")

// if the pen is in thumbnail view, scale it up
if (location.pathname.match(/fullcpgrid/i) ? true : false) {
  document.documentElement.style.fontSize = "48px"
  document.querySelector(".note").style.display = "none"
}


let isHovering = false

el.addEventListener("mousemove", (event) => {
  const rect = el.getBoundingClientRect()
  const localX = (event.clientX - rect.left) / rect.width
  const localY = (event.clientY - rect.top) / rect.height
  
  console.log(localX, localY)
  glowEl.style.left = localX * 100 + "%"
  glowEl.style.top = localY * 100 + "%"
  
  borderEl.style.left = localX * 100 + "%"
  borderEl.style.top = localY * 100 + "%"
  
  if (isHovering) {
    glowEl.style.transition = "inset 50ms linear, opacity 300ms ease";
    borderEl.style.transition = "inset 50ms linear, opacity 300ms ease"
  } else {
    glowEl.style.transition = "opacity 300ms ease"
    borderEl.style.transition = "opacity 300ms ease"
  }
  
  isHovering = false
});

el.addEventListener("mouseout", (event) => {
  isHovering = true;
})

style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  font-family: "Inter";
  font-size: 16px;
  --gradient: linear-gradient(to bottom, #2eadff, #3d83ff, #7e61ff);
  --color: #32a6ff
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  width: 100%;
  background: #0c0c0b;
  overflow: hidden;
  display: grid;
  place-content: center;
}

.noti {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  position: relative;
  width: 18rem;
  height: 8rem;
  background: #29292c;
  border-radius: 1rem;
  overflow: hidden;
}
.noti:before {
  position: absolute;
  content: "";
  inset: 0.0625rem;
  border-radius: 0.9375rem;
  background: #18181b;
  z-index: 2
}
.noti:after {
  position: absolute;
  content: "";
  width: 0.25rem;
  inset: 0.65rem auto 0.65rem 0.5rem;
  border-radius: 0.125rem;
  background: var(--gradient);
  transition: transform 300ms ease;
  z-index: 4;
}
.noti:hover:after {
  transform: translateX(0.15rem)
}

.notititle {
  color: var(--color);
  padding: 0.65rem 0.25rem 0.4rem 1.25rem;
  font-weight: 500;
  font-size: 1.1rem;
  transition: transform 300ms ease;
  z-index: 5;
}
.noti:hover .notititle {
  transform: translateX(0.15rem)
}
.notibody {
  color: #99999d;
  padding: 0 1.25rem;
  transition: transform 300ms ease;
  z-index: 5;
}
.noti:hover .notibody {
  transform: translateX(0.25rem)
}

.notiglow, .notiborderglow {
  position: absolute;
  width: 20rem;
  height: 20rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle closest-side at center, white, transparent);
  opacity: 0;
  transition: opacity 300ms ease;
}
.notiglow { z-index: 3; }
.notiborderglow { z-index: 1; }

.noti:hover .notiglow {opacity: 0.1}
.noti:hover .notiborderglow {opacity: 0.1}


.note {
  color: var(--color);
  position: fixed;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.9rem;
  width: 75%;
}