Diseño de hipervínculos: 9 ejemplos de sitios web reales (incluido CSS)

Estudiar ejemplos de diseño de hipervínculos es más importante de lo que se cree. Los enlaces son lo que convierte a Internet en “la web” y conectan entre sí páginas y sitios web que de otro modo no estarían relacionados. También guían a los visitantes por su sitio, les permiten descubrir más sobre él y profundizar en los temas que les interesan. Además, al igual que los vínculos de retroceso, los hipervínculos son deseables como señal de SEO.

En resumen, sin enlaces, los sitios web e Internet no serían lo que son.

Ya hemos hablado deCómo aplicar estilo a los enlaces usando CSSEn un artículo anterior, sin embargo, el hecho de que sepas cómo aplicarlo no significa que sepas qué estilo darle a tus enlaces. Por ese motivo, eso es lo que queremos cubrir en este artículo.

A continuación, repasaremos ejemplos de cómo diferentes sitios web se aseguran de que sus enlaces sean visibles y atractivos. También examinaremos el marcado subyacente y analizaremos cómo lograron el diseño de sus hipervínculos. Esperamos que todo esto le brinde una buena comprensión y le proporcione ideas para los enlaces de su propio sitio web.

¿Por qué pensar en el diseño de tus enlaces?

Hablemos primero de por qué debería invertir en el diseño de los hipervínculos de su sitio para empezar. A menos que esté en elDiseño webNegocios, probablemente estás tan familiarizado con su uso que nunca pensaste de manera consciente en su apariencia.

Sin embargo, si prestas atención, te darás cuenta rápidamente de que los enlaces se ven muy diferentes en cada sitio web. Usan distintos colores, algunos están subrayados, otros no, pero aun así, sabes instintivamente que un fragmento de texto es un enlace en el que se puede hacer clic. Al menos, en el mejor de los casos.

En el peor de los casos, el diseño del enlace es tan malo que resulta difícil identificarlos y eso es un problema.

¿Por qué?

Porque, en primer lugar, pocas personas leen realmente sus páginas y artículos completos,La mayoría de ellos escanean. Esto significa que saltan de un punto de anclaje a otro para encontrar solo las partes de su contenido que les interesan y son relevantes para ellos.

Junto conencabezadoso imágenes, los enlaces son uno de esos anclajes. Si no los haces destacar y ser identificables, harás que tu contenido sea más difícil de entender para una gran parte de tus lectores. Y eso nunca es una buena idea siQuiero que se queden.

Por supuesto, también hay que pensar en el texto de anclaje del enlace, que les permite saber a dónde los llevará el enlace, pero ese es un tema para otro artículo.

Aparte de eso, tus enlaces son parte del diseño de tu sitio web, por lo que debes asegurarte de que sean coherentes con el resto de tu sitio.

Cómo orientar los enlaces

Como ya se mencionó en la introducción, tenemos unaArtículo completoTe recomiendo que leas este artículo sobre cómo aplicar estilo a los enlaces a través de CSS. Sin embargo, como algunos de los principios que se incluyen son importantes para comprender los ejemplos que se muestran a continuación, aquí tienes algunas notas breves.

Lo primero que es importante saber es que, en HTML, los enlaces se crean con la aetiqueta de ancla o .

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

En consecuencia, así es también como se debe orientar su estilo en CSS:

a {color: #3af278;}

En segundo lugar, además de simplemente a, los enlaces pasan por varios estados cuando se utilizan.

Puedes diseñarlos por separado usandopseudoclases:

• a:visited– Un enlace que el usuario ha visitado anteriormente, lo que significa que existe en el historial de su navegador.
• a:focus– Un enlace enfocado, por ejemplo, es aquel al que un visitante ha accedido utilizando la tecla de tabulación.
• a:hover– El estilo que es visible cuando los usuarios pasan el cursor del mouse sobre un enlace hovery, focusa menudo, se diseñan juntos.
• a:active– Estilo brevemente visible durante el momento de hacer clic en el enlace.

Ejemplos de diseño de hipervínculos para inspirar sus propias decisiones

Después de este breve discurso, echemos un vistazo a las diferentes formas en que puedes diseñar hipervínculos en tu sitio web.

Revista Smashing

Comenzamos con Smashing Magazine. Como se trata de una revista de diseño web muy conocida, se podría pensar que su diseño de enlaces es perfecto. Por ese motivo, es sorprendente ver que prácticamente optaron por la opción estándar, al menos para los enlaces dentro del contenido. Son azules, están subrayados y ni siquiera cambian cuando se pasa el cursor por encima.

Por un lado, esto es realmente bueno porque garantiza que cualquiera pueda reconocerlos como enlaces. Por otro lado, es un poco decepcionante porque el resto del sitio web tiene muchos enlaces.microinteracciones, pero los enlaces no.

Pero no temas, cuando lo hagas focus, un poco de diversión y marca se notarán con una línea de puntos alrededor del enlace en rojo de Smashing Magazine.

Cómo lo hicieron

Si quieres utilizar un efecto de contorno similar al de Smashing Magazine, aquí está el marcado CSS:

:focus {      outline: 3px dotted var(--THEME_COLOR_HOVER,#d33a2c) !important;      outline-offset: 2px;}

No es nada del otro mundo. Un simple contorno punteado con un ancho definido, color (usandoPropiedades personalizadas de CSS), y un desplazamiento para hacerlo más ancho.

TorqueMag

A continuación, veremos cómo manejamos el diseño de enlaces aquí en TorqueMag. Si examina cualquiera de los enlaces de esta u otras páginas, descubrirá lo siguiente:

• Los hipervínculos son azules y están subrayados de forma colorida.
• Al pasar el cursor sobre ellos se vuelven negros y también cambia el color del guión bajo.
• Cuando está enfocado o activo, un enlace queda rodeado por un cuadro con unsombra paralela

Marcado CSS

¿Cómo se logra todo esto técnicamente? Empecemos por la estrella obvia del espectáculo, el degradado utilizado para subrayar los enlaces, tanto en su estado normal como en hovery active. A continuación se muestra el código que lo crea.

a {    color: #5568aa;    text-decoration: none;    font-weight: 700;    background-image: linear-gradient(45deg,#ffc08c,#aa278c 30%,#0ecad4);    background-position: 0 100%;    background-repeat: repeat-x;    background-size: 100% 2px;    transition: background-size .3s;}a:focus,a:hover {    color: #252d4a;    background-size: 400% 2px;    -webkit-animation: underline-gradient 4s linear infinite;    animation: underline-gradient 4s linear infinite;    text-decoration: none;}

Aquí está el desglose: En primer lugar, el marcado CSS elimina el subrayado habitual (ver text-decoration: none;) y luego crea una imagen de fondo con un degradado que utiliza tres colores. Esta imagen de fondo se coloca completamente en la parte inferior y se establece en repeat. Finalmente, recibe un tamaño, que es 100% horizontalmente y 2px verticalmente.

También hay una transitionpropiedad necesaria para el efecto de desplazamiento, que, sorprendentemente, se logra aumentando el tamaño de la imagen de fondo. De esa manera, los colores se estiran, lo que, junto con transition, le da una sensación de movimiento. Esto último se amplifica por el hecho de que el efecto de desplazamiento también utiliza una animación que hace que los colores sigan moviéndose mientras el cursor está sobre el enlace.

Hay muchas cosas sucediendo por un simple enlace, ¿no es así?

En contraste, el focusdiseño es bastante simple con solo un contorno y una sombra hacia el exterior:

:focus {    box-shadow: 0 0 6px #75a1f2;    outline: 1px solid #75a1f2;}

WPKube

Debo admitir que me gusta mucho este siguiente ejemplo de diseño de hipervínculo. Si bien es bastante simple, en mi opinión, también está hecho con mucho gusto.

El diseño inicial parece bastante simple: los enlaces están coloreados en rojo con una línea gris debajo.

Al pasar el cursor sobre ella, la línea gris adquiere el mismo tono de rojo, con un ligero retraso entre los dos estados.

El código subyacente

Naturalmente, el marcado para este tipo de look no es muy complicado:

a {    border-bottom: 1px solid #ddd;}a:hover {    border-bottom: 1px solid #f05928;    text-decoration: none;}

Lo interesante es que lo logran con la borderpropiedad. Esto solía ser una cosa porque te daba más control sobre cómo estilizar la línea. Sin embargo, hoy en día tienenNuevas características CSSque puede apuntar text-decorationa propiedades directamente, como text-decoration-offseto text-decoration-thickness, por lo que piratearlo borderya no es necesario.

Tenga en cuenta que el transitionefecto es parte de una declaración general para muchos elementos del sitio, incluidos botones, etc. Es pequeño, pero hace la diferencia.

Los enlaces enfocados en WPKube simplemente tienen una línea de puntos alrededor de ellos.

Ya hemos visto esto en otro ejemplo, por lo que no es necesario explicar nuevamente cómo lograr esto en CSS.

Fitness de nerd

A continuación, se muestra uno de mis sitios web de fitness favoritos. También hacen un buen trabajo al resaltar sus enlaces coloreándolos con el rojo de la marca.

Sin embargo, elegí específicamente este ejemplo de diseño de hipervínculo porque tiene un efecto sutil para el hoverestado. El color del vínculo se desatura levemente para brindar retroalimentación a los usuarios.

Aquí te explicamos cómo hacerlo

Este es un efecto simple, por lo que tampoco necesita mucho marcado para lograrlo. Simplemente tiene un color para la etiqueta de ancla y otro para a:hovermientras haya una transitionpropiedad para todo el sitio para que el cambio sea menos abrupto.

* {    transition: all ease-in-out .25s;    transition-property: all;    transition-property: background,color,border,opacity;}a {    color: #c73737;    text-decoration: none;}a:hover {    color: #d35e5e;}

Manzana

Incluí este ejemplo para mostrarles que incluso las empresas más grandes con un presupuesto de diseño básicamente infinito pueden optar por un enfoque muy básico. En la página de inicio de Apple, los enlaces simplemente aparecen en azul y se subrayan cuando se pasa el cursor sobre ellos (correctamente, a través de text-decoration). El contorno del estado de enfoque es simplemente un poco más grueso de lo habitual.

El marcado

Aquí está el código si quieres hacer algo similar:

a {    color: #2997ff;}a:hover {    text-decoration: underline;}:focus {    outline: 4px solid rgba(0,125,250,0.6);    outline-offset: 1px;}

Salud masculina

Esta página web de la revista aporta una idea novedosa. A primera vista, parece que todo sigue igual: los enlaces de la página simplemente tienen un subrayado. Lo único que llama la atención es que la línea es ligeramente más gruesa de lo habitual.

Sin embargo, tienen un truco bajo la manga para cuando pasas el cursor sobre los hipervínculos. Para señalarlo, Men’s Health ha optado por utilizar un color de fondo como indicador. Los enlaces se vuelven amarillos con una mínima demora. Una novedad entre nuestros ejemplos de diseño de hipervínculos.

Código CSS

El marcado subyacente para esto también es digno de mención por otra razón. Para lograr la línea inicial para sus enlaces, el sitio utiliza las propiedades mencionadas anteriormente y relativamente nuevas para controlar text-decoration.

a {    text-decoration: underline;    text-decoration-thickness: 0.125rem;    text-decoration-color: #d2232e;    text-underline-offset: 0.25rem;    -webkit-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;}

Como puedes ver, tanto text-decoration-thickness, text-decoration-colorcomo text-underline-offsetjuegan un papel importante para que el diseño se vea como lo hace.

En cuanto al efecto hover, algo que llama la atención es que simplemente utiliza yellowcomo denominación su color.

a:hover {    background-color: yellow;    -webkit-transition: all 0.3s ease-in-out;    transition: all 0.3s ease-in-out;}

Fuera de los ejemplos y sitios web de prueba, esta es una forma muy poco común de…Declarar colores en CSSY es divertido verlo en la naturaleza. Aparte de eso, naturalmente encuentras la transitionpropiedad de hacer que la aparición y desaparición del fondo flotante sea menos abrupta.

Nacional Geográfico

National Geographic busca un efecto similar al de Men’s Health, pero lo logra de forma muy diferente. También aquí el diseño del hipervínculo es simple al principio, con subrayados más gruesos. Sin embargo, al pasar el ratón por encima, cubren toda la palabra o frase vinculada.

Lo interesante aquí es que el fondo parece crecer de abajo hacia arriba, así que veamos cómo lo hicieron.

¿Cómo es esto posible?

En primer lugar, aquí está el marcado de los enlaces en su estado normal:

a {    background-image: linear-gradient(120deg,#fc0,#fc0);    background-position: 0 100%;    background-repeat: no-repeat;    background-size: 100% 0;    border: none;    border-bottom: 2px solid #fc0;    text-decoration: none;    -webkit-transition: background-size .125s ease-in;    -o-transition: background-size .125s ease-in;    transition: background-size .125s ease-in;}

Como se puede observar, al igual que en otros ejemplos de diseño de hipervínculos, lo logran con una simple border-bottomdeclaración, pero al mismo tiempo hay una imagen de fondo ubicada hasta el final pero con un tamaño vertical cero.

En realidad, así es como obtienen la impresión de crecimiento, ya que al pasar el mouse, pasa al tamaño 100% vertical mientras que la ease-intransición se encarga del hecho de que aparece gradualmente desde abajo.

a:hover {    background-size: 100% 100%;    border-color: #fc0;    color: #000;}

Veintidós

Para los últimos ejemplos, veamos cómo dos temas predeterminados de WordPress manejan el diseño de hipervínculos. El primero esVeintidósNo ocurre nada demasiado espectacular: los enlaces, que suelen estar subrayados de forma continua, tienen una línea discontinua debajo al pasar el mouse sobre ellos.

Sin embargo, aún no hemos visto este tipo de manipulación, por lo que pensé que sería bueno cubrirlo.

Así es como funciona

El tema maneja esto de la manera esperada. Las etiquetas de anclaje tienen text-decoration: underlinevalores asignados para su grosor y desplazamiento. Al pasar el mouse sobre el elemento, cambia a text-decoration-style: dashed. Eso es todo.

a {    text-decoration-thickness: 1px;    text-underline-offset: 0.25ch;}a:hover,a:focus {    text-decoration-style: dashed;}

Veintiuno

Nuestro último ejemplo esVeintiunoTiene un efecto de desplazamiento similar al de su predecesor, sin embargo, en lugar de una línea discontinua, utiliza una de puntos.

Pero no es por eso que lo menciono aquí. Lo interesante es su efecto de enfoque. En lugar del contorno habitual, los diseñadores decidieron usar un color de fondo que contrastara para que resaltara.

El CSS adjunto

También es interesante cómo lo lograron. Como se puede ver en el marcado a continuación, el color de fondo es básicamente blanco, sin embargo, tiene su opacidad establecida al 90%.

a:focus {    outline: 2px solid transparent;    text-decoration: underline 1px dotted currentColor;    text-decoration-skip-ink: none;    background: rgba(255, 255, 255, 0.9);}

De esa manera, obtienes un aspecto más sutil que proporciona un contraste claro pero no es demasiado marcado.

Utilice estos ejemplos para diseñar su propio hipervínculo

Sin enlaces, lo que llamamos Internet o World Wide Web no sería lo que es. Por ese motivo, los hipervínculos merecen tanta atención en el diseño web como otros elementos. Después de ver los ejemplos de diseño de hipervínculos anteriores, resumamos lo que podemos sacar de ellos:

• Marca tus enlaces claramente para que sean fáciles de reconocer, las herramientas más comunes para eso son colores, guiones bajos o ambos.
• Utilice efectos de desplazamiento para asegurarse de que los usuarios puedan ver su interacción con sus enlaces. Hay una amplia gama de posibilidades para ello.
• ¡No descuides el focusestado! Facilita la navegación por tus páginas a usuarios con diferentes capacidades.

Eso es todo. Ahora tienes una buena base para tomar decisiones de diseño sobre tus propios hipervínculos.

¿Cuál de los ejemplos de diseño de hipervínculos anteriores te gusta más o te disgusta menos y por qué? ¿Qué otras posibilidades de diseño de enlaces te gustan? ¡Cuéntanoslo en los comentarios a continuación!