Remove Shadow from Bootstrap Status

Asked

Viewed 104 times

-1

As I take that animation that leaves the blue edges of the button when I keep the mouse pressed on it, when I click on it, it gets blue edges. I am using Bootstrap 4.

css bootstrap-4

2 answers

5

You have to take the box-shadow of pseudo :focus. Only then the user will be without a visual feedback that clicked on the button, this is not recommended from the point of view of accessibility

 
.btn:focus,
.btn-primary:focus {
    box-shadow: none !important;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<form>
  <button type="button" class="btn btn-primary">Submit</button>
</form>

1

Do it this way:

.btn:focus{
  box-shadow:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button type="button" class="btn btn-primary">Primary</button>

Browser other questions tagged css bootstrap-4

You are not signed in. Login or sign up in order to post.