Notification Badge with message using HTML and CSS

In the dynamic world of web design and user experience, capturing the attention of visitors has never been more essential. As online interactions continue to evolve, web developers seek innovative ways to communicate important updates and messages effectively. Among the array of attention-grabbing techniques, one particular gem stands out: the Notification Badge with message.

Picture those captivating little badges you’ve seen on your favorite websites, playfully displaying messages or indicating unseen alerts. They possess an almost magical ability to engage users and ensure they never miss a beat. In this exciting blog, we will dive deep into the realm of HTML and CSS, unlocking the secrets to creating dazzling Notification Badges.

Whether you’re a curious beginner or a seasoned developer, this guide will serve as your compass to navigate the process step-by-step. From crafting the perfect badge with eye-catching designs to seamlessly integrating it into your web projects, we’ve got you covered.

Join us as we embark on an adventure to elevate user experience, spark curiosity, and unleash the captivating magic of Notification Badges. Let’s harness the power of HTML and CSS to leave a lasting impression on your visitors and make your website an unforgettable digital destination. Are you ready to enchant and engage? Let’s get started!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

50 HTML CSS and JavaScript Projects you should create

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Notification Badge with message using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->
</body>

</html>

Paste the below code in your `<body>` tag.

<div class="messenger">
    <div class="mesgcircle">
        <div class="msgscrol">
            <span>Honey we need to talk...</span>
        </div>
        <div class="mesgload">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>

<div class="inspired">
    <p>Inspired from <a href="https://dribbble.com/shots/6242469-Notification-Badge-III">Dribbble</a> | <a
            href="https://dribbble.com/Volorf">Oleg Frolov</a> </p>
</div>

CSS Code

Create a file style.css and paste the code below.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: #ffd002;
  width: 100%;
  height: 100%;
}

.messenger {
  background-color: #ffffff;
  width: 160px;
  height: 160px;
  border-radius: 28px;
  margin: 10% auto;
}

.mesgcircle {
  margin: 30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #0077ff;
  float: left;
  position: relative;
}

.mesgcircle:after {
  left: -3px;
  content: '';
  border-top: 23px solid #0077ff;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  display: block;
  width: 0px;
  height: 0;
  transform: rotate(40deg);
  position: absolute;
  top: 82px;
  border-radius: 5px;
}

.mesgload {
  width: 100%;
  height: 20px;
  text-align: center;
  margin: 40px 0;
  float: left;
}

.mesgload span {
  width: 11px;
  height: 11px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  margin: 5px 3px 0;
  animation-name: dotone;
  animation-duration: 1.8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.mesgload span:nth-child(2) {
  animation-delay: .30s;
}

.mesgload span:nth-child(3) {
  animation-delay: .61s;
}

@keyframes dotone {
  25% {
    transform: translateY(-25px)
  }

  65% {
    transform: translateY(8px)
  }

  80% {
    transform: translateY(0px)
  }
}

.msgscrol {
  background-color: #ff2a00;
  width: 150px;
  height: 45px;
  border-radius: 25px;
  overflow: hidden;
  position: absolute;
  top: -55px;
  right: -50px;
}

.msgscrol span {
  font-family: 'Open Sans', sans-serif;
  font-size: 28px;
  color: #ffffff;
  display: block;
  white-space: nowrap;
  margin: 1px 0;
  animation: 4s txtscrl linear infinite;
}

@keyframes txtscrl {
  0% {
    transform: translateX(130px)
  }

  100% {
    transform: translateX(-290px)
  }
}

.inspired {
  width: 100%;
  text-align: center;
}

.inspired p {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  color: #000000;
}

.inspired a {
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid #555555;
  padding-bottom: 3px;
  font-weight: bold;
}

.inspired a:hover {
  border-bottom: 1px solid transparent;
}