Bootstrap Snippet Button hover change color and text using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container
{
    text-align:center;
}
.container .row
{
    text-align:center;
    display:inherit;
}
.btn-danger:hover
{
    background:#252525;
    border:none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
  $(document).ready(function() {
    $('.btn.btn-lg.btn-danger').hover(function() {
      $(this).html('Shop the sale now');
    }, function() {
      $(this).html('Shop now');
    });
  });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Button hover change color and text"
Bootstrap 4.0.0 Snippet by kurtzawn

Related: See More

Questions / Comments:

"Button hover change color and text" Bootstrap 4.0.0 Snippet by kurtzawn

Related: See More

Questions / Comments:

"Button hover change color and text"
Bootstrap 4.0.0 Snippet by kurtzawn