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

En este tutorial, hablaremos sobre cómo diseñar enlaces web a través de CSS. Los enlaces son una parte central de cualquier sitio web. Le permiten mover a los visitantes a otras partes del mismo, consultar fuentes para subrayar los puntos que está planteando, ayudar a los lectores a descubrir publicaciones de blog más relevantes y más.

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

Estándares de enlace y estilo de enlace predeterminado

Antes de entrar en cómo hacer cambios en el diseño de sus enlaces, primero entendamos 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 denominan etiquetas de anclaje .
• href="" : cualquier cosa dentro de las comillas dobles es hacia donde apunta este enlace. Es la dirección en la que aterrizará alguien que haga clic en ella.
• TorqueMag : este es el texto del enlace que aparece en la página, por ejemplo, así (no haga clic en él, este enlace no lleva a ninguna parte).
• </a> : las partes que cierran el elemento del enlace y le dicen al navegador que el texto del enlace termina aquí.

Hasta ahora, tan fácil.

Cómo se ve el enlace por defecto

Donde se pone interesante es cuando miras cómo se ve este tipo de enlace en la página. Probablemente lo hayas visto antes.

Si declara un 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 mismo está subrayado.
2. Cuando pasa el mouse sobre él, el cursor cambia a un pequeño icono de mano.
3. Cuando haces clic en él, se vuelve rojo por un segundo.
4. Una vez que haya visitado el enlace, su color cambiará a morado.
5. Cuando navegue hasta el enlace a través de la tecla tabuladora 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 ha pensado en esto conscientemente, en algún nivel probablemente estaba al tanto de la mayoría de los anteriores simplemente navegando por la web.

Aprender sobre los estados de enlace

Algo que también se vuelve obvio de lo anterior es que los enlaces tienen diferentes estados que influyen en su apariencia. Puede orientarlos con diferentes pseudoclases de CSS que le permitan influir en su estilo individual. Estos son:

• a – Esta es la etiqueta de anclaje antes mencionada. Se dirige a todos los enlaces en todas las etapas.
• a:link – Para el enlace normal no visitado. En términos técnicos, :link apunta a todas las etiquetas de anclaje que tienen un atributo href . En realidad, no se usa tanto. Mucha gente simplemente usa a , ya que las etiquetas de anclaje sin un atributo href son bastante raras, por lo que a menudo no es necesario este tipo de diferenciación.
• a:visited : describe un enlace que el usuario actual ha visitado antes, lo que significa que existe en el historial del navegador.
• a:hover : se dirige al estilo que aparece cuando un usuario pasa el cursor del mouse sobre un enlace.
• a:active : estilo brevemente visible durante el momento en que se hace clic en un enlace.
• a:focus : un enlace que está enfocado, por ejemplo, al que un usuario ha navegado usando la tecla de tabulación. hover y focus a menudo se diseñan juntos.

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

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

El estilo de los estados de los enlaces se construye uno sobre el otro y desciende en cascada. Por lo tanto, el orden es importante para asegurarse de que funcionen según lo previsto.

Cumpliendo las expectativas del usuario

El último aparte antes de entrar en cómo puede realizar cambios en el estilo del enlace a través de CSS, es hablar sobre las expectativas del usuario. La razón por la que probablemente reconoció 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 se ven los enlaces. Expectativas que, si no se cumplen, pueden dificultar que las personas reconozcan los enlaces por lo que son. Por esa razón, cuando trabaje en el diseño de su sitio web, haría bien en mantenerse cerca de esas expectativas.

En términos prácticos eso significa:

• Asegúrese de que los enlaces estén resaltados de alguna manera. Los colores o el subrayado están bien siempre que haga que los enlaces se destaquen en la página. Evite elementos como cursiva o negrita .
• Proporcione comentarios haciendo que los enlaces cambien cuando se desplazan sobre ellos y, en menor medida, cuando se hace clic ( a:active , ¿recuerda?). Tampoco debe meterse con el cursor convirtiéndose en un símbolo de mano para indicar un elemento interactivo.

A continuación, le diremos cómo cambiar todo lo anterior. Sin embargo, tenga en cuenta que debe hacerlo con moderación para evitar frustrar a sus usuarios.

Cómo cambiar el estilo del texto de su enlace a través de CSS

Primero hablemos sobre cómo cambiar la parte de texto del enlace, ya que eso es lo que constituye la esencia del mismo.

Modificación del color del texto del enlace

Las cosas que cubrimos en esta sección son relativamente similares a nuestro artículo sobre cómo declarar colores a través de CSS. Entonces, si realmente quieres entrar en detalles, te aconsejo 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 utilice algo como HEX o rgb() . El uso de nombres de colores es extremadamente raro fuera de los casos de prueba simples.

El sistema de color que utilice depende de diferentes 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 propiedad de color y funciona de la misma manera para todos los demás estados de los enlaces. En consecuencia, también puede cambiar fácilmente el color del texto para :hover o :focus .

Ajustar 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 propiedad background-color .

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, todas las demás formas de diseñar texto en CSS también se aplican a ellos. Eso significa que puede 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 pasen el mouse sobre ellos.

Esto puede tener sentido para ciertos diseños, sin embargo, son 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 por defecto. Si quieres deshacerte de eso, puedes usar text-decoration: none; (que es el uso más común de la propiedad text-decoration ).

 a { text-decoration: none; }

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

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

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

Por ejemplo, text-underline-offset te permite controlar la distancia entre el texto y la línea debajo cuando usas text-decoration . text-decoration-thickness le permite establecer un ancho de línea personalizado. Por lo tanto, ir a la ruta border ya no es tan necesario como solía ser.

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 sobre eso.

Cambiar el estilo del cursor al pasar el mouse

Como ya hemos comentado, cuando se desplaza sobre un enlace, el cursor del mouse cambia de una pequeña flecha a una pequeña mano que señala.

Por ahora, esa es la señal universal de que se trata de un elemento HTML en el que se puede hacer clic. Sin embargo, es posible que no sepa que también puede cambiar el cursor a otras cosas, desde una cruz sobre flechas de cambio de tamaño hasta un indicador de carga.

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

Si tiene curiosidad, pruebe lo anterior en un entorno de desarrollo local para ver su efecto. Hay muchas más opciones, que puedes encontrar aquí.

Sin embargo, dado que el puntero es tan universal, esto es definitivamente lo que los usuarios esperan y, por lo general, debe ceñirse a él. Si, por alguna razón, no funciona para sus enlaces, puede corregirlo con el siguiente código:

 a { cursor: pointer; }

Incluso es posible usar imágenes personalizadas si desea usar sus propios cursores en su sitio web. Por ejemplo, una tienda en línea alemana de productos musicales utiliza su propio cursor de puntero temático.

Si examina cómo lo hacen a través de las herramientas de desarrollo de su navegador, encontrará el siguiente fragmento de código:

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

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

Hacer cambios en a:focus

El estilo para el focus es una importante ayuda de accesibilidad, así que asegúrese de que se mantenga. De forma predeterminada, el resaltado se realiza a través de la propiedad de outline , lo que hace que aparezca un cuadro a su alrededor.

¿Por qué outline y no border usted pregunta?

Porque el outline no ocupa espacio en la página. En su lugar, se encuentra sobre el fondo del elemento. De esa manera, enfocar un enlace no cambia los saltos de diseño de página o similar.

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

Muchos de ellos. Toma todo, desde color de background-color a color , font-size , box-shadow , lo que sea.

He aquí 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; }

Usando a:focus , puedes hacer básicamente lo que quieras. Sin embargo, una de las aplicaciones más interesantes podría ser que también puede simplemente personalizar el navegador predeterminado utilizando la propiedad de outline .

 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, a menudo aparecen como cuadros, como menús de navegación, como partes de formularios o llamadas a la acción.

Esto no es demasiado difícil de lograr. Básicamente, solo tiene que encontrar formas de agregar espacio alrededor del texto del enlace y proporcionar un fondo o un borde/contorno para que se muestre 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 como flexbox o grid. A continuación se muestra solo un ejemplo de cómo puede 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 reside. Por supuesto, puede 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 alejará a los usuarios de la página actual.

Así es como se hace. Primero el HTML:

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

Entonces, el CSS:

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

El a[href^="http"] apunta solo a las etiquetas de anclaje que tienen una dirección que comienza con http en href="" . A esos, el marcado agrega una imagen de fondo, que es el ícono, lo configura para que no se repita, lo mueve completamente hacia la derecha y lo centra verticalmente. El resto del marcado define el tamaño del icono y crea un poco de espacio entre este y el texto.

Pensamientos finales: estilo CSS para enlaces

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

¿Cuál es tu forma favorita de diseñar enlaces a través de CSS? ¿Algún otro consejo para compartir? ¡Por favor hazlo en los comentarios!