SO - 31848614

Fiddle 2 for Answer: http://stackoverflow.com/a/31850010/1355315

by abhitalks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css">
<div>
	<button 
		id="fixed-button1" data-qty="" 
		class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
	<button
		id="fixed-button2" data-qty="" 
		class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
	<button
		id="fixed-button3" data-qty="" 
		class="btn btn-fab btn-raised btn-material-yellow-600 mdi-action-shopping-cart"></button>
</div>

CSS

#fixed-button1, #fixed-button2, #fixed-button3 {
    position: relative; 
    font-size: 11px;   /* reduce the font-size to accomodate */
    padding-top: 0px; padding-right: 6px; /* adjust the padding to keep the text on top-left */
}
#fixed-button1::before, #fixed-button2::before, #fixed-button3::before {
    display: block; position: absolute; /* position relative to the parent button */
    top: 0%; left: 50%;                 /* position to center with enough space for text */
    font-size: 26px; padding-top: 15px; /* reset the changed properties of parent */
    transform: translate(-50%, 0%);     /* to make it centered */
}
#fixed-button1.qty::after, #fixed-button2.qty::after, #fixed-button3.qty::after {
    content: attr(data-qty);
    display: block; position: absolute;
    top: 0px; right: 0px; height: 20px; width: 20px; 
    font-size: 11px; line-height: 18px;
    background-color: #f00; color: #fff;
    border-radius: 50%; padding: 0;
}

/* following style is only for demo purpose in this snippet */
div, #fixed-button1, #fixed-button2, #fixed-button3 { margin: 24px; }

JavaScript

$("#fixed-button2").attr('data-qty', '4').addClass('qty');
$("#fixed-button3").attr('data-qty', '42').addClass('qty');