0

I'm trying to build a button that has some notification attached to it and am trying to emulate the facebook notification styles. A little red circle in the top right corner with a number in it.

I'm having some issues with it though. I can't seem to get the circle in the right place or to get the number to actually sit inside of it.

my button looks like this

<button class="btn btn-blue" id="noteBtn">Notes <span class="notification">1</span></button>

and I've tred to do this with my css

.notification:before {
  content: ' \25CF';
  font-size: 5em;
  color:red;
}

here is a js fiddle I was working with

http://jsfiddle.net/N8cjB/5/

zazvorniki
  • 3,512
  • 21
  • 74
  • 122
  • put number in other span that is sibling of this `` and then set the new span (in which number show) using margins – Blu Oct 18 '13 at 18:59
  • I'm sorry, but I'm not understanding what you're saying... put a span within my span to put the number in? That has no effect other then to add more space between the circle and the number – zazvorniki Oct 18 '13 at 19:01
  • Does this answer your question? [Easiest CSS for "red circle" notification badge with count](https://stackoverflow.com/questions/5747863/easiest-css-for-red-circle-notification-badge-with-count) – Inigo Mar 11 '22 at 12:46

3 Answers3

3

<span> and I don't get along, so I changed it to a <div>

Here you go: http://jsfiddle.net/aXvqW/3/

edit moved it out of the button a little bit, as requested.

Scott Rowell
  • 1,135
  • 6
  • 8
-1

To make it simple you don't need :before.

Add border-radius to the span, and to center the number use text-align: center

.notification {
      border-radius: 30px;
    text-align: center;
    border: red;
    width:20px;
    height:10px;
    background: red;
    padding: 2px;

}

Check this in fiddle

Praveen
  • 55,303
  • 33
  • 133
  • 164
  • Thats not really what I was going for though, I was really going to the top right corner circle with the number in it – zazvorniki Oct 18 '13 at 19:03
  • this is poorly positioned, sitting right on/inside the button, rather than offset and on top so that it stands out and apart, as is now standard practice since it gives the best UX. – Inigo Mar 11 '22 at 13:09
-1

Change <span> to <div> and make button position:relative; and notification position:absolute; using CSS then put it wherever you want.

Check it out here: http://jsfiddle.net/N8cjB/26/

Code

.button{
  margin:20px 0px;
  border:1px solid #e2e2e2;
  background:#f9f9f9;
  padding:5px 10px;
  position:relative;
  cursor:pointer;
  transition:all 0.4s;
}

button:hover{
  background:#333;
  border:1px solid #333;
  color:#fff;
}
.notifications {
      position:absolute;
      border-radius:2px;
      font-size:14px;
      background-color:red;
      color:#fff;
      padding:2px 5px;
      top:-10px;
      right:-10px;
    }
<button class="button">
Notes<div class="notifications">1</div>
</button>
Saurabh
  • 1
  • 3