Pure Css Notification Box - Hoverable

How To Make Css Notification Box ?

Here is two awesome style of Bell Hover. First one is Top Bell icon when you touch your computer cursor a new box hover from top. Another one is Bottom Bell icon when you touch your computer cursor a new box hover from bottom.

You can use this code on your site, it is 100% effective. This option is usually used to keep visitors on the site for a little longer. Using this code is more likely to reduce the bounce rate of your website which in turn leads to improvement of your website distance.

- CSS Section -

 
<style> .noti-number{ color: #fff; position: relative; top: -28px; left: 17px; font-size: 10px; background: #f00; padding: 1px; border-radius: 50px; width: 20px; text-align: center; } .noti-Btn{ transition: 0.9s; cursor: pointer; font-size: 28px; position: fixed; z-index: 99999999; bottom: 0px; left: 10px; width: 10%; } .noti-Btn:hover > .lv-noti-box{ height: 60vh; } .lv-noti-box{ width: 400px; height: 0px; transition: 0.9s; overflow-y: scroll; scrollbar-width: thin; background-color: #787979; } @media (max-width: 500px) { .lv-noti-box { width: 300px; } } .noti-sec{ padding:10px; border-bottom: 1px dotted #fff; transition: 0.2s; } .noti-sec:hover{ background-color:#f97500ed; } .noti-txt{ vertical-align: top; font-size: 14px; color: #fff; } .noti-sub-txt{ font-size: 10px; color: white; } </style>

Suggestion:  First of all, make a backup of your Blogger/Wordpress template so that you can use your theme in case of any mistake.

Please Read full user manual of this code and then try for your website. It's 100% working if you are using at proper way. So, you have to follow our given instructions. If you do not have enough knowledge about coding then be sure to read carefully and use the code following the complete guideline otherwise it may not work properly.

Don't be hurry ! At first read how to use this code poperly. We will give you opportunity to download full script. Otherwise it's may not working poperly.

- HTML Section -

<div class = "noti-Btn" href = "#">🔔 <div class = "noti-number">10</div> <div class ="lv-noti-box"> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> <div class="noti-sec"> <a href="#"> <div class = "noti-txt"> Post_Title </div> <div class = "noti-sub-txt">Sub_Title</div> </a> </div> </div> </div>


Copyright Disclaimer : CSS Code used by Globally. We share all code just for Learning Purpose. We do not Buy / Sell any code. We provide well WEB Design just for Learning Purpose. Do Not use it commercially. Always respect actual author.