Bootstrap - change the color of a button on hover

In this tutorial, we are going to learn about how to change the color of a button on hover in Bootstrap.

Consider, that we have the following button element in Bootstrap:

<button class="btn-primary">Search</button>

To change the color of a button on hover, add the :hover css selector to a button class.

:hover selector selects the element when we hover a mouse on it.

Here is an example:

.btn-primary:hover{
    background-color: white;
}

In the example above, we have added background-color: white;. So when a user hover’s on a button it changes the color of a button to white

If button color is not changing add the !important css property to it.

Here is an example:

.btn-primary:hover{
    background-color: white !important;
}

Note: The !important property overrides all previously added css styles to the current style.