<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen"> <div> <a class="quick-btn" href="#"> <i class="fa fa-briefcase fa-2x"></i><br/> <span> Briefcase</span> <span class="label label-danger">2</span> </a> <a class="quick-btn" href="#"> <i class="fa fa-diamond fa-2x"></i><br/> <span> Diamond</span> <span class="label label-success">4</span> </a> <a class="quick-btn" href="#"> <i class="fa fa-sellsy fa-2x"></i><br/> <span> Sellsy</span> <span class="label label-warning">7</span> </a> <a class="quick-btn" href="#"> <i class="fa fa-venus-mars fa-2x"></i><br/> <span> Venus Mars</span> <span class="label btn-metis-4">10</span> </a> </div>

.quick-btn { position: relative; display: inline-block; width: 90px; height: 80px; padding-top: 16px; margin: 10px; color: #444444; text-align: center; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); -webkit-box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC; box-shadow: 0 0 0 1px #F8F8F8 inset, 0 0 0 1px #CCCCCC; } .quick-btn .label { position: absolute; top: -5px; right: -5px; } .btn-metis-4 { color: #ffffff; background-color: #a264e7; border-color: #62309a; }