Creating a notification system similar to Facebook's in an HTML button using just HTML and CSS

Question

Creating a notification system similar to Facebook's in an HTML button using just HTML and CSS

I'm attempting to create a button with a notification feature that mimics the style of Facebook notifications. I want a small red circle in the top right corner, showing a numerical value.

However, I'm running into some difficulties. I can't seem to position the circle correctly or get the number to display inside it.

This is what my button currently looks like:

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

And here is the CSS code I've been using:

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

I was working on this JS Fiddle:

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

html css

Answer 1

Answer №1

<span> and I have a rocky relationship, so I switched it to a <div>

Check out the solution here: http://jsfiddle.net/aXvqW/3/

edit Adjusted the position outside the button as requested.

Answer 2

<span> and I have a rocky relationship, so I switched it to a <div>

Check out the solution here: http://jsfiddle.net/aXvqW/3/

edit Adjusted the position outside the button as requested.

Answer 3

Answer №2

Keeping it simple, you can achieve this without using :before.

Simply apply the border-radius property to the span element, and to center the number, utilize the text-align: center property.

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

}

You can test it out in this JSFiddle link

Answer 4

Keeping it simple, you can achieve this without using :before.

Simply apply the border-radius property to the span element, and to center the number, utilize the text-align: center property.

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

}

You can test it out in this JSFiddle link

Answer 5

Answer №3

Modify the HTML code by changing <span> to <div>, adjust the button's CSS properties to have a position:relative;, and modify the notification's CSS properties with a position:absolute;. You can then place them anywhere on your webpage.

View the changes 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>

Answer 6

Modify the HTML code by changing <span> to <div>, adjust the button's CSS properties to have a position:relative;, and modify the notification's CSS properties with a position:absolute;. You can then place them anywhere on your webpage.

View the changes 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>

Creating a notification system similar to Facebook's in an HTML button using just HTML and CSS

Answer №1

Answer №2

Answer №3

Similar questions

Custom stylesheet for individual users?

Tips for Ensuring Consistent Logo Appearance Across Various Browsers

What is the best way to hide the background of an extension's HTML?

What is the best way to find information in a multi-page table?

Issue with Bootstrap modal not dismissing when using click function

Creating an image in jpg format from an html file using a button

CSS - Combining Selectors and Pseudo Classes to Boost Styling

Press the smiley icon and drag it into the designated input box

Fading Out with JQuery

The lifecycle of XMLHTTPRequest objects in JavaScript - from creation to destruction

SSI stands for Server Side Includes, a feature that allows

Removing the switcher outline in Bootstrap Switch: a step-by-step guide

Employing IF conditions within a form to refine options

Inquire regarding the header image. Can you confirm if the current HTML and CSS for this is the most efficient approach?

Controlling z-buffering for transparent textures in Three.js

navigate to a different section on the page with a series of visuals preceding it

Inquiring about the usage of div elements in constructing an HTML webpage

Choose the Nth option in the dropdown list using programming

Tips for transferring data to index.html from Fetch API

Creating a button for every individual row within a table using a combination of PHP and HTML