간단한 좋아요 버튼 css 애니메이션 simple like button animation

매우 간단한 linke button animation

 

See the Pen like button animation by publisher.kim (@publisherkim) on CodePen.

 

html

<button class="btn_like">like</button>

 

css

.btn_like {width: 50px; height: 50px;background: url(https://umings.github.io/images/i_like_off.png) no-repeat center / 50px; cursor: pointer; border:0; font-size:0; margin:50px auto; display:block;}
.btn_like.on {background: url(https://umings.github.io/images/i_like_on.png) no-repeat center / 50px; animation: beating .5s 1 alternate;}
@keyframes beating {
    0% {transform: scale(1);}
    40% {transform: scale(1.25);}
    70% {transform: scale(0.9);}
    100% {transform: scale(1);}
  }

 

js *jquery 필요

 $('.btn_like').click(function () {
   $(this).toggleClass("on")
 });