Eliminar borde azul del botón de estilo personalizado css en Chrome
Estoy trabajando en una página web y quiero un estilo personalizado.<button>
etiquetas Así que con CSS, dije:border: none
. Ahora funciona perfectamente en safari, pero en cromo, cuando hago clic en uno de los botones, coloca un borde azul molesto a su alrededor. pensébutton:active { outline: none }
obutton:focus { outline:none }
Funcionaría, pero tampoco lo hacen. ¿Algunas ideas?
Así es como se ve antes de hacer clic (y cómo quiero que se vea después de hacer clic):
Y esta es la frontera de la que estoy hablando:
Aquí está mi CSS:
button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}
button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}
button.change:hover {
cursor: pointer;
background-color: #F89900;
}
button:active {
outline: none;
border: none;
}