Links HTML – diferentes colores

Los enlaces HTML se mostrarán en diferentes colores dependiendo de si se han visitado, si no se han visitado o si están activos.

Colores de los enlaces HTML

Por defecto, un link aparecerá así (en todos los navegadores)

  • Un enlace no visitado está subrayado y azul.
  • Un enlace visitado está subrayado y púrpura.
  • Un enlace activo está subrayado y rojo.

Puedes cambiar los colores que vienen por defecto usando CSS.

Ejm

<style>
a:link {
  color: green; 
  background-color: transparent; 
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

Botones link

Un enlace también se puede diseñar como un botón, mediante CSS.

Botón como enlace

Ejm

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>