Inspired by twitter, a responsive "like button" using HTML, CSS and Javascript.
A Pen by matt henley on CodePen.
<div class="placement"> | |
<div class="heart"></div> | |
</div> |
$(function() { | |
$(".heart").on("click", function() { | |
$(this).toggleClass("is-active"); | |
}); | |
}); |
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> |
.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%); | |
} |