How to disable button color change when mouse hover over button or user push the button?

I'm using bootstrap:

<link rel='stylesheet prefetch' href='.2.0/sandstone/bootstrap.min.css'>

And here is some part of code that use button:

<form id="idForm1" method="post" action="/web_crawler">
    <h4> Web crawler requests: </h4><br>
    <textarea id="id_text_requests" name="text" rows="5" cols="20" style="resize:none">{{text_requests}}</textarea><br>
    <input id="form1_send_button" type="button" class="btn" value="Run web crawler">
    <br>
</form>

UPDATE:

Base on answers and suggestions, here is (not perfect) solution with css, but I hardcoded color(maybe it can be done in some automated way?) and also after button is in clicked state some dotted frame appears, how to remove it?

Here example:

.btn:hover {
    background:#325d88;
    }
.btn:active:focus { 
    color: #FFFFFF;
    }
.btn:focus { 
    background: #325d88;
    color: #FFFFFF;
    }

Update 2:

Looks like it was firefox related problem:

This can fix it:

.btn:focus { 
    background: #325d88;
    color: #FFFFFF;
    outline:none;
    }

How to disable button color change when mouse hover over button or user push the button?

I'm using bootstrap:

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn./bootswatch/3.2.0/sandstone/bootstrap.min.css'>

And here is some part of code that use button:

<form id="idForm1" method="post" action="/web_crawler">
    <h4> Web crawler requests: </h4><br>
    <textarea id="id_text_requests" name="text" rows="5" cols="20" style="resize:none">{{text_requests}}</textarea><br>
    <input id="form1_send_button" type="button" class="btn" value="Run web crawler">
    <br>
</form>

UPDATE:

Base on answers and suggestions, here is (not perfect) solution with css, but I hardcoded color(maybe it can be done in some automated way?) and also after button is in clicked state some dotted frame appears, how to remove it?

Here example:

.btn:hover {
    background:#325d88;
    }
.btn:active:focus { 
    color: #FFFFFF;
    }
.btn:focus { 
    background: #325d88;
    color: #FFFFFF;
    }

Update 2:

Looks like it was firefox related problem:

This can fix it:

.btn:focus { 
    background: #325d88;
    color: #FFFFFF;
    outline:none;
    }

• javascript
• html
• css
• twitter-bootstrap

• What have you tried to do so far? – Phiter Commented Feb 9, 2018 at 10:42
• I think it's best if you use a custom button because bootstrap does all that styling every time. – Phiter Commented Feb 9, 2018 at 10:43
• Possible duplicate of What is a Bootstrap disabled button hover class name? – Ele Commented Feb 9, 2018 at 10:45
• **You can do it with css ** Click here to see the solution – Rizwan Commented Feb 9, 2018 at 10:47

2 Answers 2

Create a style of disabled button in every states: :disabled, :hover, :active

.btn:disabled,
.btn:disabled:hover,
.btn:disabled:active,
.btn:disabled:hover:active {
    // Your disabled styles
}

Live Demo: https://jsfiddle/565ang1z/

You can use this css

#idForm1    .btn:focus,
#idForm1    .btn:active:focus,
#idForm1    .btn.active:focus,
#idForm1    .btn.focus,
#idForm1    .btn:active.focus,
#idForm1    .btn.active.focus {
  outline: none;
  outline-offset: 0;
}
#idForm1    .btn:hover,
#idForm1    .btn:focus,
#idForm1    .btn.focus {
  color: #333;
  text-decoration: none;
}
#idForm1    .btn:active,
#idForm1    .btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}