CSS3 BUTTON GROW BOOTSTRAP BTN GROUP

CSS3 BUTTON GROW BOOTSTRAP BTN GROUP

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container"> <h4 class='filtertitle'>CHOOSE BRUSHES</h4>
<div class="btn-group btn-group-justified blocks" data-toggle="buttons">
  <label class="btn btn-primary grow active">
          <img src="http://brandoral.com/img/brush-head-child.png" class="btnimg">
      <input type="radio" name="options" data-brush="child"> <span class='large'><sup>view</sup>Child</span>
  </label>
  <label class="btn btn-primary grow">
      <img src="http://brandoral.com/img/brush-head-teen.png" class="btnimg">
    <input type="radio" name="options" data-brush="teen"><span class='large'><sup>view</sup>Teen</span>
  </label>
  <label class="btn btn-primary grow">
          <img src="http://brandoral.com/img/brush-head-adult.png" class="btnimg">
    <input type="radio" name="options" data-brush="adult"><span class='large'><sup>view</sup>Adult</span>
  </label>
</div>
<hr>
          
          <span id="results"></span>

CSS

body{margin:50px;}.blocks .btn-primary 
{
    padding: 24px 12px;
    margin: 0 5px;  
    border-radius: 3px;
}
.filtertitle{margin-bottom:30px}
.large sup {font-size:50%;font-style:italic;color:#aac8ff}
.btn-group span{position:relative;z-index:2;text-shadow: 2px 2px 4px #333333;}
.large{font-size:1.8em;padding:0;float:left}
 
.btnimg {
    position: absolute;
    top: -40px;
    right: 2px;
    z-index: 1;
}

.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.btn.active, .btn:active {
    background-color: #879c12;
}

JavaScript

var initialSet = $("label.active").children("input").data("brush");


$("#results").html("Get Results for : " + initialSet);
$('input[name="options"]').change( function() {
    $("#results").html("Get Results for : " + $(this).data("brush"));

});