Cómo diseñar enlaces con CSS: un tutorial detallado para principiantes

En este tutorial, hablaremos sobre cómo aplicar estilo a los enlaces web mediante CSS. Los enlaces son una parte central de cualquier sitio web. Permiten dirigir a los visitantes a otras partes del sitio, hacer referencia a fuentes para subrayar los puntos que se están planteando, ayudar a los lectores a descubrir publicaciones de blog más relevantes y mucho más.

Aprender a cambiar el diseño le permitirá asegurarse de que sean reconocibles como enlaces y se adapten al resto de su sitio web. CSS ofrece muchas formas y propiedades diferentes para eso, así que veámoslas una por una.

Estándares de enlaces y estilos de enlaces predeterminados

Antes de analizar cómo realizar cambios en el diseño de los enlaces, primero comprendamos su composición. Así es como se ve un elemento de enlace en HTML:

a href="https://torquemag.io/"TorqueMag/a

Como puedes ver, consta de varias partes:

• a– Este es el operador para crear un elemento de enlace. ¿Por qué a? Porque en HTML, los enlaces también se denominanetiquetas de anclaje.
• href=""– Todo lo que está entre comillas dobles es el lugar al que apunta el enlace. Es la dirección a la que llegará quien haga clic en él.
• TorqueMag– Este es el texto del enlace que aparece en la página, por ejemplocomo esto(no haga clic, este enlace no lleva a ninguna parte).
• /a– Las partes que cierran el elemento de enlace y le dicen al navegador que el texto del enlace termina aquí.

Hasta aquí todo fácil.

Cómo se ve el enlace por defecto

Lo interesante es ver cómo se ve este tipo de enlace en la página. Probablemente ya lo hayas visto antes.

Si declara cualquier enlace antiguo en un documento HTML y no proporciona ninguna información de estilo, adoptará el estilo predeterminado:

1. El texto del enlace es azul y el enlace en sí está subrayado.
2. Cuando pasas el ratón sobre él, el cursor cambia a un pequeño icono de mano.
3. Al hacer clic se vuelve rojo por un segundo.
4. Una vez que hayas visitado el enlace, su color cambiará a morado.
5. Cuando navega hasta el enlace a través de la tecla de tabulación de su teclado, tendrá un contorno azul a su alrededor.

Estos estándares se establecieron en los primeros días de Internet y no han cambiado mucho desde los años 90. Lo curioso es que, incluso si nunca has pensado en esto conscientemente, en algún nivel probablemente estabas al tanto de la mayor parte de lo anterior simplemente por navegar por la web.

Aprendiendo sobre los estados de enlace

Algo que también resulta obvio a partir de lo anterior es que los enlaces tienen diferentes estados que influyen en su apariencia. Puedes orientarlos con diferentesPseudoclases CSSque te permiten influir en su estilo individual. Estos son:

• a– Esta es la etiqueta de anclaje mencionada anteriormente. Se dirige a todos los enlaces en todas las etapas.
• a:link– Para el enlace normal, no visitado. En términos técnicos, :linkapunta a todas las etiquetas de anclaje que tienen un hrefatributo. En realidad, no se usa tanto. Mucha gente simplemente usa a, ya que las etiquetas de anclaje sin un hrefatributo son bastante raras, por lo que a menudo no hay necesidad de este tipo de diferenciación.
• a:visited– Describe un enlace que el usuario actual ha visitado anteriormente, lo que significa que existe en el historial del navegador.
• a:hover– Estilo de destino que aparece cuando un usuario pasa el cursor del mouse sobre un enlace.
• a:active– Estilo brevemente visible durante el momento de hacer clic en el enlace.
• a:focus– Un enlace que está enfocado, por ejemplo, al que un usuario ha accedido usando la tecla de tabulación hovery, focusa menudo, se presentan juntos.

Lo importante a tener en cuenta es que, al cambiar el estilo de varios estados de enlace a la vez, debes hacerlo en el siguiente orden.

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

Los estilos de los estados de los enlaces se basan en los demás y se transmiten en cascada. Por lo tanto, el orden es importante para garantizar que funcionen como se espera.

Cumplir con las expectativas del usuario

El último comentario aparte antes de analizar cómo se pueden realizar cambios en el estilo de los enlaces mediante CSS es hablar de las expectativas de los usuarios. La razón por la que probablemente hayas reconocido fácilmente los enlaces predeterminados como enlaces es porque ciertos valores predeterminados se han arraigado en nosotros como usuarios durante mucho tiempo.

Como consecuencia, nosotros (y todos los demás) tenemos expectativas muy claras sobre cómo deben ser los enlaces. Expectativas que, si no se cumplen, pueden dificultar que las personas reconozcan los enlaces por lo que son. Por ese motivo, al trabajar en el diseño de su sitio web, sería bueno que se ciña a esas expectativas.

En términos prácticos eso significa:

• Asegúrate de que los enlaces estén resaltados de alguna manera. Los colores o el subrayado están bien siempre que los enlaces se destaquen en la página. Evita cosas comocursivaonegrita.
• Proporciona retroalimentación haciendo que los enlaces cambien cuando se pasa el cursor sobre ellos y, en menor medida, cuando se hace clic en ellos ( a:active, ¿recuerdas?). Tampoco debes alterar el cursor al transformarse en un símbolo de mano para indicar que se trata de un elemento interactivo.

A continuación te contamos cómo cambiar todo lo anterior, pero recuerda que debes hacerlo con moderación para no frustrar a tus usuarios.

Cómo cambiar el estilo del texto de un enlace mediante CSS

Hablemos primero sobre cómo cambiar la parte de texto del enlace, ya que eso es lo que constituye su esencia.

Modificar el color del texto del enlace

Los temas que cubrimos en esta sección son relativamente similares a nuestro artículo sobreCómo declarar colores mediante CSS. Así que, si quieres profundizar más en los detalles, te recomiendo que también eches un vistazo a esa publicación.

Puede cambiar el color del texto del enlace de varias maneras diferentes: palabras de color y diferentes sistemas de notación de color como código HEX, rgb()/ rgba(), hsl()/ hsla(), etc.

#link-one {color: red;}#link-two {color: #3af278;}#link-three {color: rgb(61, 76, 128);}

Así es como se ve lo anterior en la página:

Lo más común es que utilices algo como HEX o rgb(). El uso de nombres de colores es extremadamente raro fuera de casos de prueba simples.

El sistema de color que utilice dependerá de distintos factores, como la compatibilidad del navegador o si necesita o no transparencia. Sin embargo, como puede ver, asignar colores a los enlaces es bastante sencillo a través de la colorpropiedad y funciona de la misma manera para todos los demás estados de enlaces. En consecuencia, también puede cambiar fácilmente el color del texto de :hovero :focus.

Ajustar el color de fondo

Además de cambiar el color del texto, también puedes modificar el color de fondo de tus enlaces y sus diferentes estados. Esto es tan fácil como usar la background-colorpropiedad.

Aquí está el marcado para el ejemplo anterior:

#link-one {background-color: #fadbd8;color: red;}#link-two {background-color: #f26c2e;color: #3af278;}#link-three {color: rgb(61, 76, 128);}#link-three:focus {background-color: rgb(61, 76, 128);color: #fff;}

Otras opciones de estilo de texto

Dado que los enlaces no son más que texto, todos los demás…Formas de aplicar estilo al texto en CSSTambién se aplican a ellos. Esto significa que puedes asignar otras propiedades a los enlaces y sus diferentes estados y hacer que cambien el tamaño de fuente, las familias de fuentes u otras cosas cuando los usuarios pasan el cursor sobre ellos.

Esto puede tener sentido para ciertos diseños, sin embargo, existen formas menos comunes de diseñar enlaces a través de CSS.

Aquí está el marcado para lograr los efectos anteriores:

#link-one {background-color: #fadbd8;color: red;font-family: Arial;}#link-two {color: #3af278;font-weight: 600;text-transform: uppercase;}#link-three {color: rgb(61, 76, 128);}#link-three:focus {font-size: 36px;}

Trabajar con subrayado

Como aprendimos al principio, los enlaces están subrayados de forma predeterminada. Si quieres deshacerte de eso, puedes usar text-decoration: none;(que es el uso más común de la text-decorationpropiedad).

a {text-decoration: none;}

Algunas personas también prefieren agregar un subrayado solo al pasar el mouse sobre el enlace, pero no sobre el enlace normal. Esto también es fácil de hacer.

a {text-decoration: none;}a:hover {text-decoration: underline;}

Además, puedes usar border: bottom;en lugar de text-decoration: underline;para agregar una línea debajo de tus enlaces. La gente solía utilizar esto porque ofrecía mejores opciones de estilo. Sin embargo, hoy en día tenemos nuevas propiedades para el underlinemétodo estándar que permiten más personalizaciones.

Por ejemplo, text-underline-offsetpermite controlar la distancia entre el texto y la línea inferior cuando se utiliza text-decoration. text-decoration-thicknesspermite establecer un ancho de línea personalizado. Por lo tanto, seguir la borderruta ya no es tan necesario como antes.

Aparte de eso, hay muchas formas de trabajar con la línea debajo de los enlaces, incluida la animación. Probablemente podrías escribir otro artículo solo sobre eso.

Cambiar el estilo del cursor al pasar el mouse sobre él

Como ya hemos hablado, cuando pasas el cursor sobre un enlace, el cursor del ratón cambia de una pequeña flecha a una pequeña mano que señala.

A estas alturas, esa es la señal universal de que estás tratando con un elemento HTML en el que se puede hacer clic. Sin embargo, es posible que no sepas que también puedes cambiar el cursor por otras cosas, desde una cruz hasta flechas de cambio de tamaño o un indicador de carga.

a {cursor: crosshair;}a {cursor: move;}a {cursor: wait;}a {cursor: n-resize;}a {cursor: grab;}

Si tienes curiosidad, prueba lo anterior en unentorno de desarrollo localpara ver su efecto. Hay muchas más opciones, que puedes encontraraquí.

Sin embargo, dado que el puntero es tan universal, esto es definitivamente lo que los usuarios esperan y, por lo general, deberías mantenerlo. Si, por alguna razón, no funciona para tus enlaces, puedes corregirlo con el siguiente fragmento de código:

a {cursor: pointer;}

Incluso es posible utilizar imágenes personalizadas si desea utilizar sus propios cursores en su sitio web. Por ejemplo, un cursor alemánTienda online de artículos musicalesutiliza su propio cursor puntero temático.

Si examinas cómo lo hacen a través de tuherramientas para desarrolladores de navegadores, encontrará el siguiente fragmento de código:

a {  cursor: url(../images/hand.cur),pointer;}

Como puedes ver, puedes simplemente usar un cursor personalizado proporcionando la dirección de un archivo de imagen.

Realizar cambios en a:focus

El estilo focuses un aspecto importanteayuda de accesibilidad, así que asegúrate de que permanezca ahí. De manera predeterminada, el resaltado se realiza a través de la outlinepropiedad, que hace que aparezca un cuadro a su alrededor.

¿Por qué outliney no borderte preguntas?

Porque outlineno ocupa espacio en la página, sino que se ubica sobre el fondo del elemento. De esa manera, al enfocar un enlace no se modifica el diseño de la página, ni se producen saltos ni nada similar.

Entonces, ¿qué otras opciones de estilo tienes para un enlace enfocado?

Muchos de ellos. Se necesitan de todo, desde background-colorhasta color, font-size,box-shadowLo que sea.

A continuación te explicamos cómo lograr lo anterior:

#link-one:focus {color: red;}#link-two:focus {box-shadow: 0 0 14px 0px;}#link-three:focus {font-size: 36px;}

Con a:focus, puedes hacer básicamente todo lo que quieras. Sin embargo, una de las aplicaciones más interesantes podría ser que también puedes personalizar simplemente el valor predeterminado del navegador usando la outlinepropiedad.

a:focus {outline: 3px dotted green;}

Así es como se ve lo anterior en la página:

Botones y cuadros de enlace

Por supuesto, los enlaces no son solo enlaces de texto. En algunos lugares, suelen aparecer como cuadros, comomenús de navegación, como partes de formas, oLlamadas a la acción.

No es demasiado difícil de lograr. Básicamente, solo tienes que encontrar formas de agregar espacio alrededor del texto del enlace y proporcionar un fondo o borde/contorno para que aparezca como un botón o un cuadro. Aparte de eso, siguen siendo el mismo elemento de enlace que estábamos usando antes.

Hay varias formas de lograr esto, desde simplemente agregar relleno a sistemas comocaja flexibleoredA continuación se muestra solo un ejemplo de cómo puedes hacerlo, hay muchas más opciones.

a {background-color: #1a0dab;color: #fff;padding: 1.5rem;}

En este caso, el CSS contiene tanto el estilo del enlace como el contenedor en el que se encuentra. Por supuesto, puedes usar los mismos estados de enlace que antes para incluir un comportamiento diferente para diferentes escenarios.

Incluya iconos en sus enlaces

Una cosa rápida que merece una explicación es que también tienes la posibilidad de incluir iconos en tus enlaces. Es lo que hacen algunas personas para dejar aún más claro que algo es un enlace externo que llevará a los usuarios fuera de la página actual.

A continuación te explicamos cómo hacerlo. Primero, el código HTML:

a id=link-one href="#"Link Text/aa id=link-two href="#"Link Text/aa id=link-three href="https://wikipedia.org/"Link Text/a

Luego, el CSS:

a[href^="http"] {background: url('external-link-icon.png') no-repeat right center;background-size: 16px 16px;padding-right: 15px;}

Los a[href^="http"]objetivos solo tienen etiquetas de anclaje que tienen una dirección que comienza con httpen el href="". A estas, el marcado les agrega una imagen de fondo, que es el ícono, la establece como no repetible, la mueve completamente hacia la derecha y la centra verticalmente. El resto del marcado define el tamaño del ícono y crea un poco de espacio entre este y el texto.

Reflexiones finales: estilos CSS para enlaces

Cambiar el estilo de los enlaces a través de CSS no es tan difícil una vez que se conocen los conceptos básicos. La parte más importante es comprender que adoptan diferentes estados a los que apuntan distintos operadores y pseudoclases. Después de eso, es simplemente una cuestión de utilizar propiedades CSS comunes para cambiar su diseño a lo que desee. Ahora tiene toda la información que necesita para comenzar.

¿Cuál es tu forma favorita de aplicar estilo a los enlaces mediante CSS? ¿Tienes algún otro consejo para compartir? ¡Déjalo en los comentarios!