Create CSS Notification Badge

We are going to show you how to make notification badge using CSS and HTML. These CSS Badges can be very effective in alerting the consumer to new things for your web page.

The Notification Badge likely is seen on different social sites like Facebook etc. Today our small tutorial about making CSS Notification with Animation that looks nice on website or web applications.

We can use these notification message alert boxes in the different area of a website. We can use them in mobile application development while letter the user know about accurate information such as Task, Login, Message, and Chat, etc.

How to Create CSS Notification Badge

Let’s start creating the box with HTML and our markup is simple with few different divs. You can adjust this markup structure as you need.

<div class="bocata">
	<div class="message_length">
	   <span>100</span>
	</div>
	<div class="text_wrapper">
		<div class="dots_wrapper">
			<span class="dots dot_one"></span>
		</div>
		<div class="dots_wrapper">
			<span class="dots dot_two"></span>
		</div>
		<div class="dots_wrapper">
			<span class="dots dot_three"></span>
		</div>
	</div>
	<div class="shadow"><div>
</div>

The CSS Styles

To style the box you need to copy and paste following CSS. It will render a beautiful counting badge for notifications.

.bocata {
  position: relative;
}
.bocata:after, .bocata:before {
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  z-index: 99;
}
.bocata {
  background-color: #ffffff;
  width: 100px;
  padding: 1em 1.5em;
  position: relative;
  border: 4px solid #008fa5;
  border-radius: 5px;
}
.bocata:after {
  top: 100%;
  left: 28%;
  border-top-color: #fff;
  left: 28%;
  border-width: 10px;
  margin-top: -10px;
  margin-top: 0;
}
.bocata:before {
  border-width: 16px;
  border-top-color: #008fa5;
  left: 28%;
  bottom: -32px;
  margin-left: -6px;
}
.bocata.new_message {
  -webkit-transition: width cubic-bezier(0.11, 0.92, 0.52, 0.98);
  transition: width cubic-bezier(0.11, 0.92, 0.52, 0.98);
  -webkit-animation: collapsing 0.7s;
          animation: collapsing 0.7s;
}
.bocata.new_message .message_length {
  -webkit-animation: zoom 0.6s 0.7s;
          animation: zoom 0.6s 0.7s;
}
.bocata.new_message .text_wrapper .dots.dot_one {
  -webkit-animation: blink 1s 0.6s infinite alternate;
          animation: blink 1s 0.6s infinite alternate;
}
.bocata.new_message .text_wrapper .dots.dot_two {
  -webkit-animation: blink 1s 0.75s infinite alternate;
          animation: blink 1s 0.75s infinite alternate;
}
.bocata.new_message .text_wrapper .dots.dot_three {
  -webkit-animation: blink 1s 0.9s infinite alternate;
          animation: blink 1s 0.9s infinite alternate;
}
.bocata .message_length {
  position: absolute;
  min-width: 18px;
  top: -15px;
  right: -18px;
  text-align: center;
  zoom: 100%;
  background-color: #008fa5;
  color: white;
  border-radius: 10px;
  padding: 0.5em;
}
.bocata .text_wrapper {
  text-align: center;
}
.bocata .text_wrapper .dots_wrapper {
  float: left;
  width: 33%;
  text-align: center;
}
.bocata .text_wrapper .dots {
  width: 5px;
  height: 5px;
  line-height: 0;
  border-radius: 50%;
  display: inline-block;
  background-color: black;
}
.bocata .shadow {
  content: "";
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-shadow: 0 25px 20px 0px #008fa5;
}

@-webkit-keyframes collapsing {
  0% {
    width: 100px;
  }
  20% {
    width: 80px;
  }
  70% {
    width: 75px;
  }
  75% {
    width: 110px;
  }
  90% {
    width: 90px;
  }
  100% {
    width: 100px;
  }
}

@keyframes collapsing {
  0% {
    width: 100px;
  }
  20% {
    width: 80px;
  }
  70% {
    width: 75px;
  }
  75% {
    width: 110px;
  }
  90% {
    width: 90px;
  }
  100% {
    width: 100px;
  }
}
@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

The JavaScript.

In most cases you don’t need this JavaScript but if you want to add a setTimout function than here it is. Just make sure to add the main jQuery file to run this function. You can use your own function to update this counter in JavaScript.

setTimeout(function(){
	$('.bocata').addClass('new_message');
}, 1000);

setTimeout(function(){
	$('.message_length span').html('101');
}, 2200);

You Might Be Interested In: