<div class="btn-wrapper">
  <a class="btn">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="btn__icon" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path class="btn__fill" d="M364,48.057c-39.7,0.111-78.035,14.502-108,40.544c-29.965-26.042-68.3-40.433-108-40.544  C69.434,44.931,3.21,106.087,0.084,184.653c-0.038,0.943-0.066,1.886-0.084,2.829c0,114.912,222.144,258.176,247.456,274.112  c5.188,3.243,11.772,3.243,16.96,0C356.352,404.921,512,283.353,512,187.481c-1.564-78.612-66.559-141.072-145.171-139.508  C365.886,47.992,364.943,48.02,364,48.057z"/>
<path class="btn__border" d="M256,464.057c-3.025,0.015-5.991-0.84-8.544-2.464C222.144,445.657,0,302.393,0,187.481  C1.564,108.869,66.559,46.409,145.171,47.973c0.943,0.019,1.886,0.047,2.829,0.084c39.699,0.116,78.032,14.507,108,40.544  c29.968-26.037,68.301-40.428,108-40.544c78.566-3.126,144.79,58.03,147.916,136.595c0.038,0.943,0.066,1.886,0.084,2.829  c0,96-155.616,217.44-247.584,274.208C261.885,463.245,258.971,464.065,256,464.057z M148,80.057  C86.885,77.15,34.985,124.338,32.078,185.453c-0.032,0.676-0.058,1.352-0.078,2.028c0,67.2,114.56,171.136,224,241.664  c112.64-71.2,224-175.296,224-241.664c-1.787-61.158-52.813-109.288-113.972-107.502c-0.676,0.02-1.352,0.046-2.028,0.078  c-36.428-0.035-71.243,15.026-96.16,41.6c-6.432,6.539-16.947,6.626-23.486,0.194c-0.065-0.064-0.13-0.128-0.194-0.194  C219.243,95.084,184.428,80.022,148,80.057z"/>
</svg>
    <span class="btn__text">Like</span>
  </a>
  
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

* {
    box-sizing: border-box;
}

html, body{
  font-family: 'Roboto', sans-serif;
  margin:0px;
  padding:0px;
}

.btn__icon{
  width:30px;
  display:inline-block;
  vertical-align:middle;
}

.btn__fill{
  fill: #65B5F8;
}

.btn__border{
  fill: #fff;
}

.btn{
  position:absolute;
  top:50%;
  left:50%;
  transform: translateY(-50%) translateX(-50%);
  cursor:pointer;
  color: #fff;
  text-decoration:none;
  padding:10px;
  background-color: #65B5F8;
  display:inline-block;
  position:relative;
  overflow:hidden;
  border-radius: 30px;
    transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}

.btn__text{
  display:inline-block;
  vertical-align:middle;
  margin-left:8px;
  font-weight:400;
  position:absolute;
  top:16px;
  right:-30px;
  visibility:hidden;
    transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}

.btn-wrapper{
  position:absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
  width:100%;
  height:100%;
}

.btn:hover .btn__text{
      visibility: visible;
  right:12px;
}
.btn:hover {
  padding:10px 52px 10px 10px;
  border-radius: 30px;
}

.btn--liked-big{
  background-color:#ef7da8;
}

.btn--liked-big{
  background-color:#ef7da8;
}
.btn--liked-small{
  background-color:#ef7da8;
}

.btn--liked-big .btn{
  padding:10px 52px 10px 10px;
  border-radius: 30px;
}

.btn--liked-big .btn__text{
  visibility: visible;
  right:12px;
}
.btn--liked-big .btn{
  background-color:transparent;
      transition: all 0s;
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -ms-transition: all 0s;
  -o-transition: all 0s;
}

.btn--liked-big .btn__fill{
  fill:#fff;
}

.btn--liked-small .btn__fill{
  fill:#fff;
}

.btn--liked-small .btn{
  background-color:transparent;
      transition: all 0s;
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -ms-transition: all 0s;
  -o-transition: all 0s;
}

.btn--liked-small .btn__text{
  visibility:hidden;
    transition: all 0s;
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -ms-transition: all 0s;
  -o-transition: all 0s;
}

.btn--liked-small .btn__text{
  visibility:hidden;
}

.btn--liked-small .btn:hover .btn__text{
  visibility:hidden;
  
}

.btn--liked-small .btn:hover{
  padding:10px;
}

.btn--liked-small {
    width: 50px;
    height: 50px;
    border-radius: 50%;
      transition: all 0.25s;
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s ;
  -o-transition: all 0.25s;
}

$(document).ready(function(){
  $('.btn').click(function(){
      $('.btn-wrapper').addClass('btn--liked-big');
    setTimeout(function(){
      $('.btn-wrapper').removeClass('btn--liked-big');
      $('.btn-wrapper').addClass('btn--liked-small');
    }, 250)
  });
})