Hey there, I'm currently working on a project using React and facing an issue with some buttons I've styled. Whenever I click on them, they show a strange blue border that I can't seem to get rid of. I've tried setting border:none !important and overriding the color, but nothing seems to work. My styling is done using SCSS and I also have react-bootstrap installed.
Here are examples of buttons with the blue border:
https://i.sstatic.net/qdVlH.png
https://i.sstatic.net/zDY4K.png
Code for the 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;
}
}
If anyone could offer assistance on resolving this issue, it would be greatly appreciated as it's starting to bother me. Thank you!