Hola a todos! Alguien podría decirme por que en el botón al hacer clic este tiene como un borde negro? Ya intente usar la Pseudoclase <st...

Ya lo agregue y ya quedo! Muchas Gracias :D

Muchas gracias por el comentario @Jorvict lo intentare y ta te cuento! pero seguro que si funciona. Muchas Gracias!

Hola Joel, lo que sucede es que el botón cuenta con un outline predefinido, para ello debemos eliminarlo, sin embargo no basta solo con eliminarlo en la pseudo clase "active", ya que éste caso actúan 2 pseudo clases distintas, está el "active" que es cuando un elemento está siendo utilizado por el usuario, en caso del botón éste proceso inicia cuando haces clic y termina cuando sueltas el clic(sí borras el outline solo de "active" cuando mantienes el clic pulsado podrás ver el borde azul, pero al soltarlo regresará el outline). Esto se debe a que al soltar el clic el botón estará con la pseudo clase "focus", por ello también debemos eliminar el outline de dicha subclase(Te dejo un link donde explican varias pseudo clases: https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes ). En mi caso coloqué el código de ésta forma según los nombres de clase de tu código, me comentas sí te funcionó, y si no sirvió también me avisas para tratar de buscar otra solución xD.

.button:active, .button:focus{
    outline: none;
    border-color: rgba(6, 132, 211);
}