Foundation
Home

Button with Notification Badge

By Christine Siu

F6

badge notification button icon alert

How do I use This?

A simple button with an iOS style notification badge.

HTML

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


<a href="#" class="button-badge">
  <i class="fa fa-envelope"></i>
  <span class="badge alert">1</span>
</a>

.button-badge {
  background-color: $primary-color;
  text-decoration: none;
  padding: 1rem 1.5rem;
  position: relative;
  display: inline-block;
  border-radius: .2rem;
  transition: all ease 0.4s;
}

.button-badge:hover {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: .8em;
}

.fa {
  color: white;
}

.button-badge {
  background-color: #1779ba;
  text-decoration: none;
  padding: 1rem 1.5rem;
  position: relative;
  display: inline-block;
  border-radius: .2rem;
  transition: all ease 0.4s;
}

.button-badge:hover {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.badge {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: .8em;
}

.fa {
  color: white;
}

JS