DEV Community

Cover image for Notification Budge Using HTML & CSS

Notification Budge Using HTML & CSS

Nikhil Bobade
I am Frontend Developer, currently living in Mumbai, India. My interests range from technology to design. Currently learning MEAN and Data Structure.
・1 min read

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!

Discussion (6)

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.

nikhil27b profile image
Nikhil Bobade Author

Thank you for valuable information

ra1nbow1 profile image
Matvey Romanov

Pretty simple and nice

nikhil27b profile image
Nikhil Bobade Author

Thanks 😊

furkanulutasx profile image

Good job.

nikhil27b profile image
Nikhil Bobade Author

Thank you 😊