Как создать CSS Бейдж (Notification Badge)

Buzz
2328 Просмотров
Что такое бейдж?
Наглядный пример как это будет выглядеть:
Нажмите на изображение для увеличения.  Название:	badge-300x153.png  Просмотров:	1308  Размер:	14.9 Кб  ID:	15506

Добавляем HTML код
Код HTML:
<button class="badge1" data-badge="6">Badge Notification Example</button> <br> <a href="" class="badge1" data-badge="27">Badge Notification Example</a>
Теперь стили CSS
Код:
.badge1 {
   position:relative;
}
.badge1[data-badge]:after {
   content:attr(data-badge);
   position:absolute;
   top:-10px;
   right:-10px;
   font-size:.7em;
   background:green;
   color:white;
   width:18px;height:18px;
   text-align:center;
   line-height:18px;
   border-radius:50%;
   box-shadow:0 0 1px #333;
}
Метки: badge, css, html
    0 Комментарии