<button class="btn">Hover, click & hold</button>
<a target="_blank" href="https://twitter.com/joericho">made by @joericho</a>

$gradient-start: #D38312;
$gradient-end: #A83279;
body {
   text-align: center;
   margin: 7rem auto;
   background: #222;
}

.btn {
   /* reset */
   -webkit-appearance: none;
   border: 0;
   outline: 0;
   /* styles */
   position: relative;
   background: linear-gradient(45deg, $gradient-start 10%, $gradient-end 90%);
   background-size: 200% 100%;
   padding: 1.5rem 2rem;
   color: white;
   border-radius: 100px;
   font-size: 1.3rem;
   font-family: "Source Code Pro";
   transition: .3s;
   
   &:hover {
      animation: bruh 3s linear infinite;
   }
}

@keyframes bruh {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

a {
   display: table;
   margin: 25px auto;
   text-decoration: none;
   color: lighten(#222, 10%);
   font-family: "Source Code Pro";
   transition: .3s;

   &:hover {
      color: white;
   }
}