<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Animated button</h2> </div> </div> <div class="trial-btn text-center"> <a class="book_trial nav-item" href=""> <button class="btn btn-primary book_trial_btn color-fff" data-event-prop="top_right_nav" style="border-radius:0;"> <span class="btn-text"> Book a FREE Trial </span> </button> </a> </div>

.navbar-nav .nav-item { position: relative; } .trial-btn a { display: block; } .trial-btn button { -webkit-animation: f 53s linear infinite; animation: f 53s linear infinite; background: linear-gradient(121.19deg,rgba(133,239,49,0) 25.73%,hsla(0,0%,100%,.3) 45.27%,rgba(133,239,49,0) 62.27%),#ff8d1a; } .book_math_trial_btn, .book_trial_btn { position: relative; overflow: hidden; width: 17rem; height: 51px; font-family: FuturaPTBold,sans-serif; justify-content: center; border: none; padding: 5px 12px; } @keyframes f{ 0% { background-position: -5000px 0; } 100% { background-position: 5000px 0; } }