<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container text-center mt-5"><a href="" class="order-button mt-5">HOVER ME!!</a> </div>

.order-button{ padding: 10px; font-size: 2em; text-decoration: none; color: black; background-color: lightgrey; } .order-button:hover{ text-decoration: none; color: white; background-color: #c91d61; background: linear-gradient(20deg, crimson,blue,red,green); background-size: 1000% 1000% !important; -webkit-animation: changeColors 10s ease infinite; -moz-animation: changeColors 10s ease infinite; -o-animation: changeColors 10s ease infinite; animation: changeColors 10s ease infinite; } @-webkit-keyframes changeColors { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }