كيف ممكن اضافة badge الى Button لعرض رقم معين - How can I add a badge to the button to display a number

تطوير الويب Backend - ASP.NET Core

كيف ممكن نضيف badge لعرض رقم بمواصفات معينه مثل تنبيه بعدد الرسائل الغير مقرؤه. المطلوب عرض هذه الرقم داخل دائرة بلون احمر  

المطلوب عرض هذا badge داخل button ليكون بالشكل التالي: 

تمام

نبدأ بصفحة HTML وبنضيف button 

الكود الخاص بهذا button 

  <div class='icon-container'>
            <button type="submit" class="btn btn-sign-in">Sign in</button>
            <div class='status-circle'>
               3
            </div>
        </div>

الكد بسيط جدا اضفنا <div> وطبقنا عليه class باسم icon-container لتحديد الطول والعرض، بعد هيك اضنفا button. وبعد هيك اضفنا <div> ليحتوي الرقم المطلوب عرضه، وطبقنا عليه class باسم status-circle

بعد هيك بنضيف الكود الخاص بملف CSS 

الكود : 

.icon-container {
    width: 100%;
    height: 30px;
    position: relative;
}
.status-circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: red;
    border: 2px solid white;
    bottom: 50%;
    right: 0%;
    position: absolute;
    text-align:center;
    color:white;
}