<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="circlebuttons"> <button type="button" class="btn btn-default btn-circle btn-size10" onclick="Set_Search_Param('f-Itty Bitty', '1828'); Refine();"> </button> <div class="circlebutton-label"> <div class="circlebutton-label1">Itty Bitty</div> <div class="circlebutton-label2">10mm</div> </div> <button type="button" class="btn btn-default btn-circle btn-size12" onclick="Set_Search_Param('f-Pee Wee', '1829'); Refine();"> </button> <div class="circlebutton-label"> <div class="circlebutton-label1">Pee Wee</div> <div class="circlebutton-label2">12mm</div> </div> <button type="button" class="btn btn-default btn-circle btn-size14" onclick="Set_Search_Param('f-Fancy', '1830'); Refine();"> </button> <div class="circlebutton-label"> <div class="circlebutton-label1">Fancy</div> <div class="circlebutton-label2">14mm</div> </div> <button type="button" class="btn btn-default btn-circle btn-size16" onclick="Set_Search_Param('f-Player', '1831'); Refine();"> </button> <div class="circlebutton-label"> <div class="circlebutton-label1">Player</div> <div class="circlebutton-label2">16mm</div> </div> <button type="button" class="btn btn-default btn-circle btn-size25" onclick="Set_Search_Param('f-Whopper', '1832'); Refine();"> </button> <div class="circlebutton-label"> <div class="circlebutton-label1">Whopper</div> <div class="circlebutton-label2">25mm</div> </div> </div> <script type="text/javascript"> function Set_Search_Param(){ // clear any existing filter in SearchParams var searchParams = []; $.each(SearchParams.split('&'), function(index, value){ if (!value.match(/^f-([^=]*)=(\w*)$/)) searchParams.push(value); }); SearchParams = searchParams.join('&'); return Add_Search_Param.apply(this, arguments); } </script>

body { padding: 2rem; } .circlebuttons { /* general formatting */ text-align: right; margin-top: -4rem; margin-bottom: 1rem; } .circlebutton-label { display: inline-block; margin-right: 1rem; text-align: left; line-height: 1em; } .circlebutton-label2 { font-size: 0.8em; } .btn-circle { background-color: #eee; vertical-align: text-bottom; padding: 0; } .btn-circle.btn-size10 { width: 2em; height: 2em; border-radius: 1em; } .btn-circle.btn-size12 { width: 2.4em; height: 2.4em; border-radius: 1.2em; } .btn-circle.btn-size14 { width: 2.8em; height: 2.8em; border-radius: 1.4em; } .btn-circle.btn-size16 { width: 3.2em; height: 3.2em; border-radius: 1.6em; } .btn-circle.btn-size25 { width: 5em; height: 5em; border-radius: 2.5em; }