Introduction:

Add a touch of celestial magic to your website with MoonAlert, a CSS animated moon notification box. This unique and captivating design element is perfect for grabbing users' attention and adding a personal touch to your online presence.
Features:
  • Responsive design
  • Smooth CSS animations
  • Customizable colors and sizes
  • SVG moon shape
Code:
HTML<!-- HTML -->
<button class="notification-box">
  <a href="https://codecrafti.blogspot.com" target="_blank">
    <div class="moon-container">
      <svg viewBox="0 0 378.4 408.6">
        <path class="moon" fill="#ECC048" d="..."/>
      </svg>
    </div>
  </a>
</button>
CSS/* CSS */
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #2a2a2a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

.notification-box {
  position: relative;
  border: none;
  background: transparent;
  padding: 25px;
  z-index: 2;
  animation: shake 4.72s ease infinite;
}

.moon-container {
  display: inline-block;
}

.moon-container svg {
  width: 100px;
  height: 100px;
  animation: pulse 1.2s infinite alternate-reverse ease-in-out;
  transform-origin: center;
}

@keyframes shake {
  ...
}

@keyframes pulse {
  ...
}
Usage:
  1. Copy the HTML and CSS code into your project.
  2. Customize colors and sizes as needed.
  3. Add your desired link or functionality.
Demo:


Live Demo
Conclusion:
MoonAlert is a unique and captivating notification box design that adds a touch of personality to your website. With its smooth animations and customizable design, it's perfect for any project.