CODEWITHSUNDEEP
htmlcssbootstrap-4
Mike Garbanzo
Mike Garbanzo

Reputation: 3

Bootstrap 4 button color changing on hover

I'm using a the Hugo Bigspring theme with Bootstrap 4 on a website. My primary call to action buttons are orange vs. the secondary green. However, my orange buttons turn green on hover and I cannot figure out why.

Code for the button:

<a href="http://localhost:1313/contact" class="btn btn-primary">Contact Us</a>

CSS:

.btn-primary:hover,
.btn-primary:focus {
    background-color: #F37021!important;
    border-color: #F37021!important;
    box-shadow: none;
    outline: none;
}

.btn-primary {
    color: #fff;
    background-color: #F37021!important;
    border-color: #F37021!important;

You can view the site live here: https://www.bridge12.com.

The orange buttons are on the top right and the bottom of the page.

Really appreciate your help - I've been banging my head against the wall for hours on this one.

Upvotes: 0

Views: 2530

Answers (4)

Manas Khandelwal
Manas Khandelwal

Reputation: 3921

This code block in your CSS is changing the color:

.btn-primary:active, 
.btn-primary:hover, 
.btn-primary.focus, 
.btn-primary.active {
    background-color: #46812b !important;
    border-color: #46812b !important;
}

Upvotes: 1

Mike Garbanzo
Mike Garbanzo

Reputation: 3

Thank you all - this was very helpful. I was loading the style sheets in this order:

  <!-- Custom Stylesheet -->
  <link rel="stylesheet" href="http://localhost:1313/css/custom.css">

  <link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>

Changing it to this fixed it immediately:

  <link href="http://localhost:1313/scss/style.min.css" rel="stylesheet" media="screen"/>

  <!-- Custom Stylesheet -->
  <link rel="stylesheet" href="http://localhost:1313/css/custom.css">

Huge Thanks!

Upvotes: 0

Sedki Sghairi
Sedki Sghairi

Reputation: 379

Your background-color for btn-primary is set to #46812b!important; which i am sure it is not bootstrap css, that only means that you have that declared somewhere in your css. double check and you will find it.

Upvotes: 0

godhandkiller
godhandkiller

Reputation: 45

By checking your website and inspecting the element this is what is shows enter image description here

So it looks like either bootstrap or another custom CSS is overwriting your code. Make sure that bootstrap css is always loading before your custom code.

Upvotes: 0

Related Questions