Como eu tiro aquela animação que deixa as bordas azuis do botão quando mantenho o mouse pressionado nele, quando eu dou um click nele, ele fica com bordas azuis. Estou utilizando o Bootstrap 4.
2 Respostas
Tem que tirar o box-shadow
da pseudo :focus
. Só que ai o usuário vai ficar sem um feedback visual de que clicou no botão, isso não é recomendado do ponto de vista da acessibilidade
.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>
Faça da seguinte maneira:
.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>