"Like" button

index.html

<div class="placement">
  <div class="heart"></div>
</div>

like-button.markdown

"Like" button

Inspired by twitter, a responsive "like button" using HTML, CSS and Javascript.

A Pen by matt henley on CodePen.

License.

script.js

$(function() {
  $(".heart").on("click", function() {
    $(this).toggleClass("is-active");
  });
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

.heart {
  width: 100px;
  height: 100px;
  background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
  background-position: 0 0;
  cursor: pointer;
  transition: background-position 1s steps(28);
  transition-duration: 0s;
  
  &.is-active {
    transition-duration: 1s;
    background-position: -2800px 0;
  }
}

body {
  background: #000000;
}

.placement {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}