سلام 👋

تو یکی از پروژه های اخیرم کارفرما ازم خواست تا دکمه لایک برنامه رو شبیه توییتر کنم. با کمی جست و جو، Pen آقای Donovan Hutchinson رو در CodePen پیدا کردم که عینا اون دکمه انیمیشنی رو زحمت کشیده ساخته. براتون قرار میدم شاید بدردتون بخوره .

توضیح تصویر

<div class="heart"></div>
.heart {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat;
  background-position: 0 0;
  cursor: pointer;
  animation: fave-heart 1s steps(28);
}
.heart:hover {
  background-position: -2800px 0;
  transition: background 1s steps(28);
}
@keyframes fave-heart {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2800px 0;
  }
}

https://codepen.io/donovanh/pen/dYqxNb