Alessio Alessio - 1 year ago 107
HTML Question

CSS Buttons with 'particular' animation

Does anyone have any idea on how to implement an HTML+CSS button that once clicked has an animation like this one?

enter image description here


Thanks for the help!

Answer Source

with Twitter's "fave" animation

.heart {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url( 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;
<div class="heart"></div>


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download