CodePen

HTML

            
              <div class="box">
  <p>Sample Text</p>
  <button>Make this bigger!</button>
</div>
            
          
!
via HTML Inspector

CSS

            
              html {
  background: #f1f1f1;
}

.box {
  display: block;
  margin: 10px auto;
  padding: 10px 0;
  background: #ccc;
  color: black;
  text-align: center;
  width: 200px;
  height: 200px;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}

.box.active {
  -webkit-transform: scale(1.2, 1.2);
  -moz-transform: scale(1.2, 1.2);
  -o-transform: scale(1.2, 1.2);
  -ms-transform: scale(1.2, 1.2);
  transform: scale(1.2, 1.2);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function() {
  var box = $('.box');
  var button = $('.box button');
  button.on('click', function(){
    box.toggleClass('active');
    if(box.hasClass('active'))
      button.text('Make this smaller!');
    else
      button.text('Make this bigger!');
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................