<div class="badge-collection"> <!-- 1st --> <div class="relative-container"> <p>Notification</p> <div class="badge top-right">4</div> </div> <!-- 2nd --> <div class="relative-container"> <p>Messages</p> <div class="badge lrg top-right">1</div> </div> <div class="relative-container"> <i class="fab fa-twitter icon-badge"></i> <div class="badge lrg top-right">1</div> </div> <!-- 3rd --> <div class="relative-container"> <button class="btn-1">Action</button> <div class="badge top-left">8</div> </div> <!-- 4th --> <div class="relative-container"> <button class="btn-2 hide">Hide</button> <div class="badge top-right hide_it">7</div> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter