React button has blue border around it when clicking

user_9441232 0
Viewed 4471

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:

enter image description here

enter image description here

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

react-bootstrap reactjs sass button css
2 Answers

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

user_115117220

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;
            }
        }
user_81728570
Related