React button has blue border around it when clicking - css

Question

Hi I'm making a project with react and I've noticed that with some buttons I make and style they sometimes get this weird looking blue border when clicking it. I tried to get rid of it by setting border:none !important or even trying override the color of it but I can't seem to get it away. I'm just using scss for styling and also have react-bootstrap installed.
this is an example of a button that has the blue border:
code of buttons
// button 1
<button type="button" className="btn employee-button" value={employee} key={employee.id} onClick={(e) => this.onEmployeeClick(employee)}>
<div className={this.state.startId === employee.id ? "selected employee-card" : "employee-card"}>
<Gravatar email={employee.email} className="employee-gravatar" />
<div>
<p className="employee-name">{employee.firstname} {employee.lastname}</p>
<p className="employee-job">{employee.jobTitle}</p>
</div>
</div>
</button>
// button 2
<button className="btn" onClick={this.openPopUp}>Create new client</button>
styling
// button 1
.employee-button {
.employee-card {
display: flex;
flex-direction: row;
background-color: $white;
width: 250px;
height: 70px;
padding: 10px;
border-radius: 10px;
margin-left: 15px;
.employee-gravatar {
border-radius: 5px;
}
div {
margin-top: 10px;
width: 80%;
margin-top: 0;
display: flex;
flex-direction: column;
font-size: 0.9em;
.employee-name{
font-weight:600;
}
.employee-job{
font-weight:500;
margin-top:-10px;
}
}
&:hover {
color:#E27D60;
box-shadow: 0px 18px 40px -12px rgba(182, 181, 181, 0.356);
}
}
}
// button 2
button {
width: 200px;
height: 50px;
color: $black;
font-size: .9em;
margin: 45px 0px;
padding: 12px;
background-color: $plain-white;
font-weight: 700;
border-radius: 5px;
&:hover {
color: #17A9A3;
}
}
I'm hoping that someone can help me with this because this is getting on my nerves

Answer 1

You need to set focus outline for button:
button:focus {outline:none;}
If it doesn't work use !important also.
--> button:focus {box-shadow:none !important;} this solved it

Answer 2

It's outline not a border, to hide it you should use :
outline:none
full example :
button {
width: 200px;
height: 50px;
color: $black;
font-size: .9em;
margin: 45px 0px;
padding: 12px;
background-color: $plain-white;
font-weight: 700;
border-radius: 5px;
outline:none;
&:hover {
color: #17A9A3;
}
&:focus{
outline:none;
}
}