Estou trabalhando em uma página da web e quero <button>
tags com estilo personalizado . Então, com CSS, eu disse:border: none
. Agora ele funciona perfeitamente no safari, mas no chrome, quando clico em um dos botões, coloca uma borda azul irritante em torno dele. Eu pensei button:active { outline: none }
ou button:focus { outline:none }
iria funcionar, mas também não. Alguma ideia?
É assim que é antes de ser clicado (e como eu quero que ainda pareça depois de ser clicado):
E é dessa fronteira que estou falando:
Aqui está o meu 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;
}
outline: none
dessa maneira, a menos que esteja pronto para substituir a perda de acessibilidade. Veja este site: outlinenone.com