JSFiddle - React, Tailwind, and code Playground

by James Butler

HTML

Simple hover version<br /><br />
<input type="submit" value="Next question" class="button button-one green next" />
<br /><br /><br /><br />
Bounce animation version<br /><br />
<input type="submit" value="Next question" class="button button-two green next">

CSS

.button.next{padding:5% 20%;background-image:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png);background-repeat: no-repeat;background-position: 91% center;}

.button-one.next:hover{background-position: 98% center;}

.button-two.next:hover{
   -webkit-animation: nextarrow 1s infinite;
   -moz-animation: nextarrow 1s infinite;
   -o-animation: nextarrow 1s infinite;
   animation: nextarrow 1s infinite;
}

@-webkit-keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}
@-o-keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}
@-moz-keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}
@keyframes nextarrow {
  0% {
    background-position: 91% center;
  }
  50% {
    background-position: 93% center;
  }
  100% {
    background-position: 91% center;
  }
}