<div class="container">
<div class="notification"></div>
<button>Increment Notifications</button>
</div>
/* Page Styles */
.container {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}
button {
display: block;
padding: 1em 2em;
outline: none;
font-weight: 600;
border: none;
color: #fff;
background-color: #3498db;
border: 1px solid #1f74ac;
border-radius: 0.3em;
margin-top: 4em;
cursor: pointer;
}
button:hover {
background-color: #2487c9;
}
/* Notifications */
.notification {
display: inline-block;
position: relative;
padding: 0.6em;
background: #3498db;
border-radius: 0.2em;
font-size: 1.3em;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.notification::before,
.notification::after {
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.notification::before {
display: block;
content: "\f0f3";
font-family: "FontAwesome";
transform-origin: top center;
}
.notification::after {
font-family: Arial;
font-size: 0.7em;
font-weight: 700;
position: absolute;
top: -15px;
right: -15px;
padding: 5px 8px;
line-height: 100%;
border: 2px #fff solid;
border-radius: 60px;
background: #3498db;
opacity: 0;
content: attr(data-count);
opacity: 0;
transform: scale(0.5);
transition: transform, opacity;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.notification.notify::before {
animation: ring 1.5s ease;
}
.notification.show-count::after {
transform: scale(1);
opacity: 1;
}
@keyframes ring {
0% {
transform: rotate(35deg);
}
12.5% {
transform: rotate(-30deg);
}
25% {
transform: rotate(25deg);
}
37.5% {
transform: rotate(-20deg);
}
50% {
transform: rotate(15deg);
}
62.5% {
transform: rotate(-10deg);
}
75% {
transform: rotate(5deg);
}
100% {
transform: rotate(0deg);
}
}
var el = document.querySelector('.notification');
document.querySelector('button').addEventListener('click', function(){
var count = Number(el.getAttribute('data-count')) || 0;
el.setAttribute('data-count', count + 1);
el.classList.remove('notify');
el.offsetWidth = el.offsetWidth;
el.classList.add('notify');
if(count === 0){
el.classList.add('show-count');
}
}, false);
This Pen doesn't use any external JavaScript resources.