JSFiddle - React, Tailwind, and code Playground

by venkateshwaran

HTML

<div class="follow-button">
  </div>

CSS

.follow-button {
	background-image: url(http://minimalmonkey.com/lab/css3-animations/twitter-bird-sprite-small.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	cursor: pointer;
	display: block;
	padding: 7px 0 7px 40px;
	position: absolute;
	top: 5px;
	-webkit-transition: right 0.3s;
	-moz-transition: right 0.3s;
	transition: right 0.3s;
	width: 168px;
    height:20px;
}

.follow-button:hover {-webkit-animation: fly 0.2s steps(4) 0 10;
	-moz-animation: fly 0.2s steps(4) 0 10;
	animation: fly 0.2s steps(4) 0 10;
}

@-webkit-keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}

@-moz-keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}

@keyframes fly {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 -140px;
  }
}