CODEWITHSUNDEEP
htmlcssbuttonbootstrap-4
user9693424
user9693424

Reputation:

Bootstrap 4 button pressed change color

I changed the bootstrap css class of the button, I changed the button color, the font size and the font color ect..

But when I press the button and hold the mouse it changes the color.

I set the color to green but when i click the button and hold the mouse it turn into blue.

This is the css code of the button

.btn-outline-primary{
  width: 220px;
  background: #A4D555; /*2cc8df*/
  border: none;
  color: white;
  font-weight:450;
}

.btn-outline-primary:hover{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

.btn-outline-primary:focus{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

.btn-outline-primary:active{
  background: #A4D555;
  outline: none;
  box-shadow: none;
}

Upvotes: 1

Views: 11224

Answers (2)

Gautam Naik
Gautam Naik

Reputation: 9358

Here is my solution,

Since you said that u want solid button in comments,

I have used btn-primary class which is for solid buttons, instead of btn-outline

.custom.btn-primary{
  width: 220px;
  background-color: #A4D555; /*2cc8df*/
  border: none;
  color: white;
  font-weight:450;
}

.custom.btn-primary:hover{
  background-color: #A4D555;
  outline: none;
  box-shadow: none;
}

.custom.btn-primary:focus{
  background-color: #A4D555;
  outline: none;
  box-shadow: none;
}

.custom.btn-primary:active{
  background-color: #A4D555!important;
  outline: none;
  box-shadow: none;
  outline: none;
}
.custom.btn-primary:active:focus{
  background-color: #A4D555!important;
  outline: none;
  box-shadow: none!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<button type="button" class="btn btn-primary custom">Primary</button>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

You have to add !important to prevent override by bootstrap definition

.btn-outline-primary{
  width: 220px;
  background: #A4D555!important; /*2cc8df*/
  border: none;
  color: white;
  font-weight:450;
}

.btn-outline-primary:hover{
  background: #A4D555!important;
  outline: none;
  box-shadow: none!important;
}

.btn-outline-primary:focus{
  background: #A4D555!important;
  outline: none;
  box-shadow: none !important;
}

.btn-outline-primary:active{
  background: #A4D555!important;
  outline: none;
  box-shadow: none !important;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-outline-primary">Primary</button>


EDIT TO YOUR COMMENT:

but there is still a blue border/outline when i click and press


set:

box-shadow: none!important;

Upvotes: 6

Related Questions