How to make buttons in html that shows number of post/items associated to that button or category.

Badges can be easily addable to custom style buttons. After adding badges to button it will show us the number of items/Post associated with that particular button. So here is the complete step by step tutorial for Add/Create custom Buttons with Badges using Bootstrap classes in HTML,PHP.

How to Add/Create custom Buttons with Badges using Bootstrap classes in HTML,PHP.

Code for button-badges.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Buttons with Badges</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">
 
 <h2>Buttons with Badges</h2>
 
 <button type="button" class="btn btn-default">Default Button <span class="badge">1</span></button>
 
 <button type="button" class="btn btn-link">Link <span class="badge">2</span></button></br></br>
 
 <button type="button" class="btn btn-success">Success Button <span class="badge">3</span></button>
 
 <button type="button" class="btn btn-info">Info button <span class="badge">4</span></button></br></br>
 
 <button type="button" class="btn btn-primary">Primary Button <span class="badge">5</span></button>
 
 <button type="button" class="btn btn-danger">Danger button <span class="badge">6</span></button>
 
 <button type="button" class="btn btn-warning">Warning Button <span class="badge">7</span></button></br></br>
 
</div>

</body>
</html>

Screenshot: