.box.favebg {
  background: #ffaf00;
}
.fave {
  width: 65px;
  height: 46px;
  background: url("http://cssanimation.rocks/assets/images/posts/steps/twitter_fave.png") no-repeat;
  background-position: 0 0;
  margin: auto;
  border-radius: 3px;
  overflow: hidden;
  background-color: #fff;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */    /* Firefox, other Gecko */
  box-sizing: border-box;
}
.fave:hover {
  background-position: -3519px 0;
  -webkit-transition: background 1s steps(55);
  -o-transition: background 1s steps(55);
  transition: background 1s steps(55);
}