Con CSS, los enlaces se pueden diseñar de muchas maneras diferentes.
Dando estilo a los links (enlaces)
Los enlaces se pueden diseñar con cualquier propiedad CSS (por ejemplo, color, font-family, background, etc.).
Ejm
a {
color: hotpink;
}Además, los enlaces pueden tener un estilo diferente según el estado en el que se encuentren.
Los cuatro estados de enlace son:
- a:link: enlace normal, sin visitar
- a:visited: un enlace que el usuario a visitado
- a:hover: un enlace cuando el usuario tiene el ratón sobre el mismo
- a:active: un enlace en el momento de ser clicado
Ejm
/* unvisited link */
a:link {
color: red;
}/* visited link */
a:visited {
color: green;
}/* mouse over link */
a:hover {
color: hotpink;
}/* selected link */
a:active {
color: blue;
}Al establecer el estilo 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
text-decoration
La propiedad de decoración de texto se usa principalmente para eliminar los subrayados de los enlaces.
Ejm
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}background-color
La propiedad background-color se puede usar para especificar un color de fondo para los enlaces.
Ejm
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
} Botones de enlaces
Este ejemplo muestra un ejemplo más avanzado en el que combinamos varias propiedades de CSS para mostrar enlaces como cuadros/botones.
Ejm
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;
}