Ligas CSS

Con CSS se puede dar estilos a las ligas (enlaces) de diferentes formas:

Liga1

Liga2

Liga3

Estilos a Ligas

Es posible darle estilos a las Ligas con las propiedades CSS como: color, font-family, background, etc.

Cóidgo:

a {
  color: hotpink;
}

Muestra:

Liga

Además, los enlaces pueden tener estilos diferentes dependiendo del estado en que se encuentren.

Los cuatro estados de los enlaces son:

• a:link : normal, liga no visitada.
• a:visited : una liga que el usuario ha visitado.
• a:hover : una liga cuando el usuario posiciona encina el puntero del mouse encima.
• a:active : una liga en el momento que se le ha dado clic.

Código:

a:link { 
  color: red;
}
a:visited {
  color: green;
}
a:hover {
  color: hotpink;
}
a:active {
  color: blue;
}

Al configurar los estilos para varios estados de enlace, existen algunas reglas de orden:

• a:hover DEBE venir después de a:link y a:visited
• a:active DEBE venir después de a:hover

La propiedad text-decoration

La propiedad text-decoration es usada principalmente para remover el subrayado de los enlaces.

Código:

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

La propiedad background-color

La propiedad background-color es usada para especificar un color de fondo para los enlaces.

Código:

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

Avanzado - Botones de Enlace

Este ejemplo muestra un ejemplo más avanzado en el que combinamos varias propiedades CSS para mostrar enlaces como cuadros / botones:

Código:

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active{
  background-color: red;
}