Notification Badge with message using HTML and CSS

Share your love

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 –

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


HTML Code 

Starter Template

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

    <!-- 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>

    <!-- Further code here -->


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 class="mesgload">

<div class="inspired">
    <p>Inspired from <a href="">Dribbble</a> | <a
            href="">Oleg Frolov</a> </p>

CSS Code 

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

@import url(;

* {
  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;

Final Output

Notification Badge with message using HTML and CSS

Written by: Piyush Patil

Code Credits: iamsgokul

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Share your love

One comment

Comments are closed.