Change Bootstrap CSS for a button property after click

Question

I'm working with Bootstrap and I'm trying to change the color of the button but it turns out that after the button has been clicked and mouse is not on it, the color is changed to blue again.

That is the color I chose:

But after a click and if the mouse is not 'inside', the color goes to blue:

I've already changed the most properties as you can see below:

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem #EB984E;
}
.btn-primary {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
}

.btn-primary:hover {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem #EB984E;
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: ##EB984E;
  border-color: ##EB984E;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: ##EB984E;
  border-color: ##EB984E;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem #EB984E;
}

.buttons input:focus {
  outline: none;
}

What is missing to the entire button gets this orange color (#EB984E)?

Answer 1

I think you should use :hover and change the properties. When you move the mouse inside the button the new properties will be used and when you move the mouse out of the button it will turn back to a normal color.

.btn-primary {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
  padding:10px 20px;
}

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

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

Answer 2

What you are missing is the :focus pseudo element and focus class, i.e.

.btn-primary:focus,
.btn-primary.focus, {
  color: #fff;
  background-color: #EB984E;
  border-color: #EB984E;
}

FYI, you have a few mistakes in your CSS: you are using ##EB984E (i.e. double #) in some rules instead of #EB984E.

Also FYI a few notes on how to style buttons for usability and accessibility:

• you are using the same colour for hover - this should be a different colour to indicate that the button is active and ready to be clicked.
• You also use the same colour for the focus outline - this outline is used to show which button has focus when the site is being used with a keyboard. It is usually a different colour to highlight this, although as long as it's clear which has focus its ok.

Now, your code working the way you want (but I highly recommend you consider the above points for your live site) :)

.buttoncontainer {
  padding: 20px;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<style>
  .btn:focus,
  .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .btn-primary {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:focus,
  .btn-primary.focus,
  .btn-primary:hover {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:focus,
  .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .btn-primary.disabled,
  .btn-primary:disabled {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active,
  .btn-primary:not(:disabled):not(.disabled).active,
  .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #EB984E;
    border-color: #EB984E;
  }
  
  .btn-primary:not(:disabled):not(.disabled):active:focus,
  .btn-primary:not(:disabled):not(.disabled).active:focus,
  .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem #EB984E;
  }
  
  .buttons input:focus {
    outline: none;
  }
</style>

<div class="buttoncontainer">
  <button class="btn btn-primary">One </button>
  <button class="btn btn-primary">Two</button>
  <button class="btn btn-primary">Three</button>
</div>

(Also FYI - the CSS is not included in the CSS panel of the snippet because it gets overridden by the Bootstrap include.)

Answer 3

You need to set background-color and border-color as orange for your button with focus class, from your code above, you only set box-shadow as orange