Cómo quitar los puntitos de los botones de enlace

El problema que tiene muchos maquetadores cuando crean una nueva web es que cuando se crean los links/enlaces de neutra web aparecen unos puntos decorativos en los botones o en las imágenes. Esos puntitos molestos siempre los queremos quitar para ello utilizamos el siguiente código:

* {
     outline: none;
}

Pero si lo has intentado solucionar mediante este código en tu CSS habrás podido comprobar que no tiene ningún efecto en nuestros enlaces o botones.

Aunque no lo parezca, es posible eliminar o modificar los bordes de los estilos de los enlaces, aunque tan solo funciona en navegadores basados en Gecko, aunque puede que webkit realiza una función similar, el efecto que se realiza en IE no es eliminar el borde o puntitos como muchos lo llamamos ya que en IE pasa mas desapercibido que en otros navegadores como Firefox.

La forma de eliminar el borde mediante la propiedad mozilla psedo-class::-moz-focus-inner.  Con esto podemos modificar el foco (focus) del enlace o link para  eliminar el bordeado que se crea al clickar en el botón o imagen que realiza las veces de enlace.

Para conseguirlo incluiremos en nuestro CSS el siguiente código:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
        border: none;
}

En estas lineas lo que estamos indicando, es que le eliminemos los bordes del foco todos los inputs, ya sean de tipo, reset, button, submit, o file, sea cual sea el tipo de botón o input, le borramos el borde del foco, es decir cuando el cursor este sobre el botón, mediante el click del raton o tabulando el cursos hasta posicionarse sobre el botón.

Otra solución que mejora la accesibilidad de nuestra pagina, es utilizar otro tipo de pseudo-clase estandar par amodificar el foto aplicando algunos estilos CSS como el siguiente ejemplo:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
        border: 1px dotted transparent;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
         padding: 3px;
         border-color: #F3F3F3;
}

Para todo el tema de Accesibilidad, este ejemplo que aquí os explico no es muy amigable para las personas discapacitadas o que utilizan con regularidad el teclado para navegar. En muchos casos el diseño ha de estar en acorde con las normas de accesibilidad web aunque muchas veces se puede crear una excepción en la accesibilidad en beneficio del diseño.

Este metodo solo sirve para los botones si lo queremos para los links normales utilizaremos lo siguiente:

a {
     outline: 0;
}

Fuente : Karl Rixon

,