<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="//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>Button hover change color and text</h2> </div> <div class="btn"> <a href="#" class="btn btn-lg btn-danger">SALE NOW</a> </diV> </div>

.container { text-align:center; } .container .row { text-align:center; display:inherit; } .btn-danger:hover { background:#252525; border:none; }

$(document).ready(function() { $('.btn.btn-lg.btn-danger').hover(function() { $(this).html('Shop the sale now'); }, function() { $(this).html('Shop now'); }); });