Cómo crear un enlace con una imagen flotante en CSS plano

Artículo escrito por:
  • Diseño de páginas Web
  • Actualizado: Ago 02, 2013

¿Qué es un vuelo estacionario? Definición citada de UWStout.edu:

'Desplazar' es un efecto que ocurre cuando coloca el cursor sobre un enlace de cualquier tipo. El enlace se puede codificar para responder al desplazamiento al cambiar el color, mostrar un nuevo gráfico o incluso reproducir un archivo de sonido.

El efecto Hover mejora la facilidad de uso de la web y ayuda a los propietarios de la web a dirigir su tráfico web. Cuando desee que los usuarios de la web presten especial atención a un enlace especial, una buena manera de hacerlo es crear un enlace con un efecto de desplazamiento atractivo. Un simple efecto hover. como este (un subrayado simple y un cambio de color del texto) indica que esos textos son 'cliqueables' y mejora las interacciones web. Sin embargo, cambiar el color y los estilos del texto (subrayado / subrayado / negrita) es muy básico y se puede hacer mucho más con el desplazamiento.

En este artículo, voy a mostrar cómo puede crear enlaces atractivos con efecto de desplazamiento.

Ejemplo 1: enlace con botón de desplazamiento

Primero, un vistazo al ejemplo de trabajo (coloque el mouse sobre el enlace para ver cómo funciona - cambio de icono en el lateral).

Ejemplo 1 - Enlace con la imagen del botón de desplazamiento

Esta es la versión completa de lo que se construirá en este ejemplo.

¿Cómo lo creamos en CSS plano?

La imagen del botón

Paso 1, como puede ver, necesitamos iconos de flechas en dos versiones diferentes. En nuestro ejemplo, usé rojo (#CC3300) como botón de enlace predeterminado; y gris (#333333) para el efecto de desplazamiento. Dicho botón se puede hacer fácilmente utilizando cualquier software de edición de imágenes.

Ahora tenemos el botón de color rojo (por ejemplo, b1.png) y el color de rey (botón por ejemplo, b2.png). Combine estos dos en un archivo de imagen con b1.png sobre b2.png. Esta será nuestra imagen final para el enlace. Asígnele un nombre (por ejemplo, x.png) y cargue la ubicación deseada (para mi caso, la coloqué en mi carpeta de plantillas WP).

Para su referencia:

B1.png , b2.png y x.png

El código CSS

A continuación, en el código CSS. Básicamente, lo que queremos lograr es sangrar el texto del enlace ligeramente a la derecha para hacer espacio para el botón; y, al mismo tiempo, muestra una imagen diferente cuando el enlace está en estado activo. Estas son cosas bastante fundamentales, excepto que necesitamos un pequeño giro en la posición de fondo. El truco es mostrar la parte superior de la imagen (el botón rojo) para el enlace original; y cuando se desplace, desplace la imagen de fondo con un margen de -11px (puede diferir en su sitio web) para mostrar el botón gris.

.xa {color: #cc3300; relleno-izquierda: 14px; font-weight: negrita; imagen de fondo: url (images / x.png); posición de fondo: 0 2px; repetición de fondo: no repetición; }
.xa: hover {color: #333333; relleno-izquierda: 14px; font-weight: negrita; imagen de fondo: url (images / x.png); posición de fondo: 0 -11px; repetición de fondo: no repetición; }

Implementación

Para mostrar este efecto de desplazamiento, simplemente inserte la clase x en el área designada. Aquí hay un ejemplo de cómo puedes hacerlo.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> Página principal </a> </p>

Ejemplo 2: enlace en segundo plano

Con el mismo concepto, hay infinitas formas en que puede hacer que sus enlaces se vean geniales. Aquí hay otro ejemplo de lo que podemos hacer con los efectos de desplazamiento con un método ligeramente diferente. Nuevamente, eche un vistazo a la versión terminada.

Ejemplo 2 - Enlace en segundo plano

En este ejemplo, lo que haré es crear un hipervínculo de botón favorito donde el fondo cambiará cuando los usuarios coloquen el mouse sobre él.

¿Cómo lo creamos en CSS plano?

Las imagenes de fondo

Primero, cree dos imágenes de rectángulo redondeado. Para fines de demostración, no fusionaremos estas dos imágenes en este ejemplo. Llamaremos al rectángulo rojo (#CC3300) como b1.png; y el rectángulo marrón (#9F2800) como b2.png.

El código CSS

A continuación, aquí están los códigos para su hoja de estilo (estamos nombrando la clase 'y' en este segundo ejemplo).

ay {ancho: 280px; altura: 42px; color: #000000; relleno: 10px; texto-decoración: ninguno; bloqueo de pantalla; font-weight: negrita; imagen de fondo: url (images / b1.png); repetición de fondo: no repetición; }
ay: hover {ancho: 280px; altura: 42px; color: #FFFFFF; relleno: 10px; font-weight: negrita; texto-decoración: ninguno; bloqueo de pantalla; imagen de fondo: url (images / b2.png); repetición de fondo: no repetición; }

Implementación

Para mostrar el enlace, simplemente inserte la clase (y) en la etiqueta <a href> en su código fuente. Ejemplo:

<a href="http://www.webhostingsecretrevealed.com" class="y"> Página de inicio </a>

Terminando

Espero que este artículo les haya brindado información valiosa e inspiró a algunos de ustedes a usar CSS de una manera creativa. Si cree que debería agregar otros puntos en esta guía, no dude en dejar sus ideas en la sección de comentarios.

Más tutoriales de CSS

Si te gusta este post, asegúrate de revisar también Cómo hacer un buen uso de las animaciones CSS 3., Debe leer los tutoriales de CSS 3 2012, así como el libro electrónico Haga su sitio fresco con estas técnicas CSS 3.

Acerca de Jerry Low

Fundador de WebHostingSecretRevealed.net (WHSR): una revisión de alojamiento confiable y utilizada por los usuarios de 100,000. Más de 15 años de experiencia en alojamiento web, marketing de afiliación y SEO. Colaborador de ProBlogger.net, Business.com, SocialMediaToday.com y más.