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;
}