8 formas de hacer que los hipervínculos sean más creativos con CSS y JavaScript

El venerable hiperv√≠nculo ha sido una caracter√≠stica crucial desde el comienzo de la World Wide Web. ¬ŅRecuerda el asombro cuando descubri√≥ que un solo clic puede llevarlo a cualquier parte del mundo?

Bien, quiz√°s ese momento haya terminado. Pero los enlaces siguen siendo importantes. Y son algo que los dise√Īadores deben hacer obvio y accesible.

Aunque simplificado, el comportamiento predeterminado para subrayar enlaces de texto funciona bastante bien. Sin embargo, CSS y JavaScript modernos nos permiten hacer mucho más. Los enlaces no solo pueden verse mejor que nunca, sino que también pueden proporcionar un mejor contexto y encajar en su marca general.

Hoy te vamos a mostrar algunos ejemplos de estilos de enlaces que van m√°s all√° de lo habitual. Se caracterizan por una mejor (o al menos m√°s interesante) experiencia de usuario.

Caja de herramientas del dise√Īador web

Descargas ilimitadas: ¬°M√°s de 1,000,000 de plantillas web, dise√Īos, complementos, recursos de dise√Īo y mucho m√°s!

Cómo destacar sutilmente

Los enlaces subrayados que contrastan con el texto en sí pueden ser una gran solución. Son intuitivos para los usuarios sin exagerar en el estilo. Aquí, el subrayado azul se separa muy bien del texto oscuro. Y la sofisticada animación flotante solo se suma a la experiencia.

Ver la pluma Enlace flotador con línea por Aaron Iker

Considere caracteres descendentes

Caracteres descendentes (como letras min√ļsculas) GRAMO, j o pags) a veces puede parecer inc√≥modo cuando est√° subrayado. Esta demostraci√≥n animada de “cuerdas de guitarra”, sin embargo, tiene una apariencia consistente. Es algo peque√Īo, pero aporta una pulcritud uniforme al dise√Īo general.

Ver la pluma Aspectos destacados del enlace de cuerdas de guitarra por James Almeida

Vamos en breve

Consulte los enlaces subrayados en el texto a continuación. Los márgenes en ambos lados dan como resultado un subrayado que no cubre todo el ancho del texto vinculado. Cuando flota, el subrayado se transforma suavemente en un espacio vacío. Esta micro-interacción es nuevamente sutil, pero muy fácil de usar.

Ver la pluma Pruebas de estilo de enlace por Nick Ciliak (@nickcil)

Conectado por estilo

Los enlaces muy subrayados fueron originalmente popularizados por Wired.com. Y aunque el lanzamiento ha avanzado en el estilo desde entonces, a√ļn vale la pena considerar su legado. Es dif√≠cil para los usuarios pasar por alto estos hiperv√≠nculos, pero el estilo no es abrumador. Este es el tipo de equilibrio por el que deben esforzarse los dise√Īadores.

Ver la pluma Wired.com enorme estilo de enlace subrayado por Mike Mai

Destacados animados

Los efectos de desplazamiento son una excelente manera de agregar personalidad a los hipervínculos de su sitio web. Tome este ejemplo de fotograma clave CSS. Transforma texto simple y crea un efecto de resaltado llamativo cuando se desplaza. Ambos se ven geniales y ayudan a los usuarios al mismo tiempo.

Ver la pluma Estilo de enlace de animación de fotogramas clave CSS3 con el Auginator

Contexto marginal

Los enlaces no siempre proporcionan un contexto completo. Claro, algo depende del contenido en sí. Sin embargo, solo hay texto suficiente para crear un hipervínculo realista. Este ejemplo es adecuado aquí. Agrega contenido de citas que aparece al lado. Al pasar el puntero del mouse sobre un enlace, también se resaltará la cita correspondiente. Esto podría ser perfecto para trabajos académicos o incluso tutoriales.

Ver la pluma Enlaces a notas marginales por Amelia Bellamy-Royds

Mover información sobre herramientas

Si las citas no van bien con su proyecto, la información sobre herramientas posiblemente haga el trabajo. Esta secuencia de comandos de jQuery le permite agregar información sobre herramientas a prácticamente cualquier elemento: contiene enlaces. También se mueven hacia la derecha con el cursor.

Ver la pluma Mover información sobre herramientas para todo: seguimiento del mouse por Eric Porter

Haz tu elección

Con las animaciones flotantes, los usuarios pueden asegurarse de que el cursor esté en el lugar correcto. Si está buscando una animación que sea a la vez convincente y ligera, debe revisar esta colección de efectos. Hay una serie de captadores de atención para mejorar sus enlaces.

Ver la pluma Animaciones de desplazamiento de enlace SCSS por Jens Lettkemann

Conéctate con el estilo atractivo

Disimular los hipervínculos en su sitio web es una de las formas más fáciles de mejorar la experiencia del usuario. Unas pocas líneas de CSS podrían ser cualquier cosa entre atraer mejor a los usuarios e incluso aumentar las conversiones.

Los ejemplos anteriores muestran una variedad de enfoques diferentes. Algunos son un poco más complejos, mientras que otros son muy fáciles. Esto es genial porque estos efectos no son iguales para todos. La clave es elegir la solución que se adapte a su sitio web y atraiga a su audiencia específica.

Los enlaces son demasiado importantes para ignorarlos. Con suerte, estos ejemplos lo inspirar√°n a hacer m√°s de lo necesario. Y si est√° buscando a√ļn m√°s fragmentos, consulte el nuestro. Colecci√≥n CodePen.