Four Bootstrap Button Hover Examples

Bootstrap is an immensely popular CSS and JS library that facilitates quick grid-style layouts. The library also has a significant number of components in its component library.

My favorite thing about the Bootstrap component library is its simplicity. For example, a Button component is simply an html button element paired with Bootstrap’s btn class (and usually an additional class like btn-primary for more specific styling).

In this post I will show four examples of adding hover color, background color, and border color in Bootstrap.

A link to full Bootstrap (with React) code is in the Resources section.

Bootstrap Primary Button Hover Color

In Bootstrap, a “primary” button is created by adding classes btn and btn-primary to a button element.

If you desire to change the styling for the primary button, simply target the .btn-primary class in your CSS file. Any styling you add (i.e. color, background-color, and border-color) will overwrite default bootstrap styling for btn-primary.

Below is the code for my example where I overwrote the primary button class:

//JSX
<div className="container">
  <div className="row">
    <button type="button" class="btn btn-primary">
      Primary
    </button>

  </div>
</div>

//CSS
.btn-primary:hover {
  color: #f9f7f4;
  background-color: #04c3ee;
  border-color: #5b288e;
}

The result of this code is below. Notice the styling overrides in dev tools. Also note that I have the :hover checkbox checked in dev tools so that we can see the hover styling applied.

 Bootstrap Primary Button Hover Color
Bootstrap Primary Button Hover Color

Bootstrap Secondary Button Hover Color

Creating a “secondary” button in bootstrap is similar to creating a “primary” button. Simply add classes btn and btn-secondary to a button element.

Here are my color, border-color, and background-color overrides for a secondary button:

//JSX
<div className="row">
  <button type="button" class="btn btn-secondary">
    Secondary
  </button>
</div>

//CSS
.btn-secondary:hover {
  color: #ddf7aa;
  background-color: #95b0b6;
  border-color: #455963;
}

And the result of targeting the btn-secondary:hover pseudo-class:

Bootstrap Secondary Button Hover Color
Bootstrap Secondary Button Hover Color

Bootstrap Outline Button Hover Color

“Outline” buttons in Bootstrap are simply buttons with a class pattern of btn-outline-* (i.e. btn-outline-primary, btn-outline-secondary).

Outline buttons are visually similar to ‘regular’ buttons in Bootstrap. The primary difference is there is no background color, and that makes the borders pop.

For the sake of example, I added background color just to show it was possible.

//JSX
<div className="row">
  <button type="button" class="btn btn-outline-success">
    Success
  </button>
</div>

//CSS
.btn-outline-success:hover {
  color: #f0eb6e;
  background-color: #38e896;
  border-color: #0f3d1c;
}

And the outline button below (you probably don’t want the background color).

Bootstrap Outline Button Hover Color
Bootstrap Outline Button Hover Color

Bootstrap Link Hover Color

The difference between link buttons and other buttons in Bootstrap is that link buttons are composed of a link element, and therefore they require additional attributes like href.

Applying the btn and btn-primary classes to a link visually transforms it to look just like a primary button composed of a button element.

//JSX
<div class="row">
  <a
    href="smartdevpreneur.com"
    target="_blank"
    class="btn btn-primary"
    tabindex="-1"
    role="button"
  >
    Primary link
  </a>
</div>

//CSS
a.btn:hover,
a.btn-primary:hover {
  color: #f9f7f4;
  background-color: #04c3ee;
  border-color: #5b288e;
}

And here we have the overridden final product. Notice that I have the :hover checkbox checked in dev tools so that we can see the hover styling applied.

Bootstrap Link Hover Color
Bootstrap Link Hover Color

Resources

Learn how to add hover styling in Material-UI.

Here’s how to add hover styling using styled components in MUI.

Code Sandbox Link

Bootstrap Button Docs

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.