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)
You can simplify the code a little:
budgecard
;.budgecard {
to.notification {
; andtext-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.
Thank you for valuable information
Pretty simple and nice
Thanks 😊
Good job.
Thank you 😊