The Complete Guide to Bootstrap Button Hover (4 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 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.

You can change button background color with a custom scss variable instead of overriding a class.

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:

Here’s how to customize Bootstrap DropDown 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 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.

Resources

Here’s how to align buttons right, left, and vertically in Bootstrap.

Here’s everything you need to know about padding in Bootstrap.

Here’s how to disable Bootstrap Buttons.

Here’s how to add a clear button (or icon) to a Bootstrap FormControl component.

Here’s how to handle vanilla Bootstrap Button onClick with TypeScript, and here’s how to handle React-Bootstrap Button onClick.

Here’s a demo for adding React Bootstrap ToolTips on button hover.

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

Here’s how to add custom icons to a Bootstrap Accordion.

Code Sandbox Link

Bootstrap Button Docs