*, *:before, *:after {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  padding-top:30%;
  text-align:center;
  overflow-x:hidden;
}
.btn-loop {
  position:relative;
  display:inline-block;
  padding:0 1rem;
  font-family:'Titillium Web', sans-serif;
  font-weight:700;
  text-decoration:none;
  font-size:3rem;
  color:transparent;
  border:5px solid tomato;
  background-image:linear-gradient(tomato, tomato);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 0;
  transition:background-size .1s;
  transform:translateZ(0);
  
  &:after {
    content:attr(name);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    color:tomato;
  }
  &:hover {background-size:100% 100%;}
  &:hover:after {
    animation:loop 1s forwards;
    color:white;
    transition:color .35s .65s;
  }
}

// As far as I know Firefox doesn't supports background-clip: text
// With CSS Feature Queries I can easily sort all webkits out
// and serve some extra CSS sugar 
@supports (-webkit-background-clip: text) {
  .btn-loop {
    
    &:after {
    content:attr(name);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:tomato;
    background-image:linear-gradient(white, white);
    background-repeat:no-repeat;
    background-position:0 100%;
    background-size:100% 0;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    }
    
    &:hover {background-size:100% 100%;}
    &:hover:after {
      animation:loop .7s forwards;
      background-size:100% 100%;
      transition:background-size .25s .45s;
    }
  }
}
@keyframes loop {
  0% {transform:translateY(0) rotate(0);}
  30% {transform:translateY(-600%) rotate(330deg);}
  100% {transform:translateY(0) rotate(360deg);}
}