Page Title

badged button

how to make it

before that

this button requires ilus.css to work ,ilus is a css framework that can make styling elements so much easier so first thing you need to do is to import ilus to your website so you can use it for importing it copy and paste this link inside the <head></head>of your webpage


              <link href="https://raw.githack.com/atoms19/ILUS.CSS/main/ILUS3.min.css" rel="stylesheet">

if you want to know more about ilus and using all its components click me

step 1:making the button

first make a regular <button></button> element then add a class of btn to it this will improove the buttons looks and also add some text inside the button next add some regular css to the button set the button's position property to relative

step 2:making the badge

next add a <span></span> inside the button and to that span element add a class of badge

step 3:add css to badge

now the span we made is a badge enter any text inside it if you want then its time to add css to it set the badge's position property to absolute then also set its top:-10px; and right:-10px;

note:you can always change the style of your button or badge by using css or modifier classes from ilus

the code for refrence


           <button class="btn blue" style="position:relative;">

           sample text

           <span class="badge red" style="position:absolute;top:-10px;right:-10px;">

           some text

           </span>

           </button>

and done your button is complete👍👍

badged button(css+ilus)