CSS - Remove focus from button by clicking

Question

I’m trying to remove the blue border that appears on the button while clicking, but insists on staying, which is missing?

Note: I am using the Bootstrap 4

I want you to have no focus or style on the button edges when you get a click

CSS:

.btn-toggle {
    height: 57px;
    width: 50px;
    border: 0px;
    z-index: 2;
    background-color: #f8f6f6;
    border-bottom: 1px solid #e6e6e6;
    border-top: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    position: relative;
    left: -10px;
    border-radius: 0px;
    outline: none;
}

JSX:

<button className="btn btn-default ml-2 btn-toggle" name="btn-toggle">

Example of the problem:

Answer 1

As you can see on Github, Bootstrap does not use outline to emphasize the state of :focus. He uses the box-shadow.

Therefore, to remove, just disable this property. So:

.btn-toggle {
  box-shadow: none;
}

But I must warn you that by doing so, your users will no longer have any feedback focusing on these elements. It’s not good practice on accessibility. Thus, it is recommended that you provide another form of feedback to the state :focus.