<div class='main-content'>
   <div class='header-group'>
      <h1>CSS Animations - Providing Feedback</h1>
   </div>
<div class='btn-group'>
   <a href="#!" class='btn' id='circle1'>Click Me</a>
</div>
<div class='btn-group'>   
   <a href="#!" class='btn' id='circle2'></a>
   <span> Click this circle</span>
</div>
<div class='btn-group'>   
   <a href="#!" class='btn' id='circle3'></a>
   <span> Click this circle</span>
</div>
</div>
</div>   

body {
   font-family: 'Open Sans', sans-serif;
   font-size: 18px;
}
.header-group {
   display: block;
   text-align: center;
}
h1 {
   position: relative;
   display: inline-block;
   text-align: center;
   font-size: 3rem;
   margin-bottom: 1em;
   padding: 0.25em 0;
}
h1:after {
   content: "";
   border-bottom: 3px solid black;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
}
.main-content {
   margin-top: 5vw;
}
.btn-group {
   display: block;
   width: 100%;
   clear: both;
   text-align: center;
   margin-bottom: 2em;
   .btn {
      display: block;
      position: relative;
      width: 5em;
      height: 5em;
      margin: 0 auto 1.5em;
      text-align: center;
      background-color: lighten(blue, 15%);
      color: white;
      text-decoration: none;
      transition: all .4s ease-out;
      border-radius: 50%;
      line-height: 4.4;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.32);
      transform: scale(1);
      transition: transform .3s ease;
      &.clicked-action {
         transform: scale(1.2);
      }
   }
   #circle2 {
      background-color: darkgreen;
      width: 2em;
      height: 2em;
      line-height: 2.4;
   }
   #circle3 {
      background-color: darkred;
      width: 1em;
      height: 1em;
      line-height: 2.4;
      &.clicked-action {
         transform: scale(1.5);
      }      
   }
   span {
      display: block;
      color: black;
      position: relative;
      margin-top: -1em;
   }
}

$('.btn').mousedown( function(e) {
   e.preventDefault();
   e.stopPropagation();
   $(this).addClass('clicked-action');
});

$('.btn').mouseup( function(e) {
   e.preventDefault();
   e.stopPropagation();
   $(this).removeClass('clicked-action');
});