Enlaces de colores

Enlaces de colores con estados hover

On this page

Colores de los enlaces

Puedes usar las clases .link-* para colorear enlaces. A diferencia de las clases .text-*, estas clases tienen un estado :hover y :focus. Algunos de los estilos de enlace usan un color de primer plano relativamente claro, y solo deben usarse sobre un fondo oscuro para tener suficiente contraste.

¡Atención! .link-body-emphasis es actualmente el único enlace de color que se adapta a los modos de color. Se trata como un caso especial hasta que llegue v6 y podamos reconstruir más a fondo nuestros colores de tema para los modos de color. Hasta entonces, es un color de enlace único y de alto contraste con estilos :hover y :focus personalizados. Sin embargo, todavía responde a las nuevas utilidades de enlace.

html

<p><a href="#" class="link-primary">Primary link</a></p>
<p><a href="#" class="link-secondary">Secondary link</a></p>
<p><a href="#" class="link-success">Success link</a></p>
<p><a href="#" class="link-danger">Danger link</a></p>
<p><a href="#" class="link-warning">Warning link</a></p>
<p><a href="#" class="link-info">Info link</a></p>
<p><a href="#" class="link-light">Light link</a></p>
<p><a href="#" class="link-dark">Dark link</a></p>
<p><a href="#" class="link-body-emphasis">Emphasis link</a></p>

Consejo de accesibilidad: Usar color para añadir significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como lectores de pantalla. Asegúrate de que el significado sea obvio por el contenido mismo (p. ej., el texto visible con un suficiente contraste de color) o se incluya mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Utilidades de enlaces

Añadido en v5.3.0

Los enlaces de color también pueden modificarse con nuestras utilidades de enlaces.