badge

Badge notification in html

We use badge notification when we work with E-commerce related web site. In that website we show shopping cart items using badge notifications.

Ex:

<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<style>

.item {

    position:relative;

    padding-top:20px;

    display:inline-block;

}

.notify-badge{

    position: absolute;

    right:-10px;

    top:15px;

    background:red;

    text-align: center;

    border-radius: 30px 30px 30px 30px;

    color:white;

    padding:2px 5px;

    font-size:10px;

}

</style>

</head>

<body>

<li aria-haspopup=”true”><div class=”item”><span class=”notify-badge”>0</span><img src=”https://furnitmart.in/assets/Images/furnitmart-shoppingcart.png”  ui-sref=”ShowCartItems” style=”cursor:pointer”/></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>

</body>

</html>

Op:

Leave a comment

Your email address will not be published. Required fields are marked *