DEV Community

Cover image for Notification Budge Using HTML & CSS
Nikhil Bobade
Nikhil Bobade

Posted on

Notification Budge Using HTML & CSS

Hello Guys,

Today I created a Amazing Notification Budge Using HTML & CSS. Currently I am at my native place to some days I am posting sum simple topics.
In this post I only using Font Awesome Icon for image and Simple Span tag to display count number. If you find this useful in a post like and save this post also comments about your thoughts and new ideas for post.

For more content follow me on Instagram @developer_nikhil27.

Thank you!

Top comments (6)

Collapse
 
alvaromontoro profile image
Alvaro Montoro • Edited

You can simplify the code a little:

  • Remove the div with class budgecard;
  • In the CSS, change from .budgecard { to .notification {; and
  • Add text-decoration: none; to that rule (so the bell isn't underlined)

Then not only the code would be simpler, but it would also be more accessible: the target size would be the whole button (and not only the text inside), which would be more intuitive and have a larger hit area (before it was smaller than the minimum of 44px by 44px specified by WCAG and it was confusing that you could click/tap on the link without triggering it).

Apart from that, it is not accessible for screen reader users who will only hear "four" without knowing what that number means; or if the styles did not load, in which case there will be a link with the text "4" and nothing else. It would be an improvement to include some visually hidden text, with a description of what the notification is.

Collapse
 
nikhil27b profile image
Nikhil Bobade

Thank you for valuable information

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Pretty simple and nice

Collapse
 
nikhil27b profile image
Nikhil Bobade

Thanks 😊

Collapse
 
furkanulutasx profile image
Furkan

Good job.

Collapse
 
nikhil27b profile image
Nikhil Bobade

Thank you 😊