Notification bell

index.html

<p>
  <div class="notifier new">
    <i class="bell fa fa-bell-o"></i>
    <div class="badge">９９９</div>
  </div>
</p>
<p>
  <div class="notifier green">
    <i class="bell fa fa-envelope-o"></i>
    <span class="badge">5</span>
  </div>
</p>

notification-bell.markdown

Notification bell

A Pen by mitsuruog on CodePen.

License.

style.scss

body {
  padding: 20px;
  background: #073B4C;
}

.notifier {
  position: relative;
  display: inline-block;
}

.bell {
  font-size: 26px;
  color: #FFF;
  transition: 0.3s;
}

.bell:hover {
  color: #EF476F;
}

.badge {
  position: absolute;
  top: -5px;
  left: 24px;
  padding: 0 5px;
  font-size: 16px;
  line-height: 22px;
  height: 22px;
  background: #EF476F;
  color: #FFF;
  border-radius: 11px;
  white-space: nowrap;
}

.notifier.green .badge {
  background: #06D6A0;
}

.notifier.green .bell:hover {
  color: #06D6A0;
}

.notifier.new .badge {
  animation: pulse 2s ease-out;
  animation-iteration-count: infinite;
}

@keyframes pulse {
  40% {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.3, 1.3, 1.3);
  }

  55% {
    transform: scale3d(1, 1, 1);
  }
  
  60% {
    transform: scale3d(1.3, 1.3, 1.3);
  }

  65% {
    transform: scale3d(1, 1, 1);
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />