HTML Enlaces - Diferentes colores
Un enlace HTML se muestra en un color diferente dependiendo de si ha sido visitado, no visitado o está activo.
HTML Colores de enlace
De forma predeterminada, aparecerá un enlace como este (en todos los navegadores):
- Un enlace no visitado está subrayado y en azul
- Un enlace visitado está subrayado y en color violeta
- Un enlace activo está subrayado y en rojo
Puede cambiar los colores del estado del enlace mediante CSS:
Ejemplo
Aquí, un enlace no visitado aparecerá en verde sin subrayado. Un enlace visitado será de color rosa sin subrayado. Un enlace activo aparecerá en amarillo y subrayado. Además, al pasar el mouse sobre un enlace (a:hover), se volverá rojo y subrayado:
<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>
Try it Yourself »
Botones de enlace
Un enlace también puede tener el estilo de un botón mediante CSS:
Ejemplo
<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>
Try it Yourself »
Para obtener más información sobre CSS, vaya a nuestro CSS Tutorial.
Etiquetas de enlace HTML
| Tag | Descripción |
|---|---|
| <a> | Define un hipervínculo |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestro Referencia de etiquetas HTML.
