Efecto pushbutton (pulsar botón) en imágenes y enlaces

viernes, 4 de septiembre de 2009
Este es un truco muy sencillo pero que a su vez puede proporcionar un efecto muy agradable a una imágen o a un enlace.
Para ver un ejemplo pasa el cursor por encima de la siguiente imagen:


Interesante, ¿verdad?.

Para poner este truco en tu blog tenemos que seguir los siguientes pasos:
1. Vamos a Diseño > Edición de HTML de la plantilla
2. Allí buscamos el siguiente código (con la ayuda de Ctrl+F):
]]></b:skin>

3. Antes de ese código pegamos el siguiente:

.pushbutton a:hover{
position: relative;
top: 1px;
left: 1px;}
Y guardamos los cambios...

4. Ahora, cada vez que queramos poner ese efecto a una imagen o texto, pegamos el siguiente código:

<span class="pushbutton"><a href="URL-DE-LA-PÁGINA"><img src="URL-DE-LA-IMAGEN"></a></span>

Y cambiámos la URL DE LA PÁGINA y la URL DE LA IMAGEN por el contenido correspondiente.
Éste código podemos utilizarlo en cualquier elemento HTML, en una entrada, un texto...

5. Para que un enlace de texto tenga éste efecto debemos reemplazar <img src= "URL-DE-LA-IMAGEN"> por el texto que queramos


Ejemplo: <span class="pushbutton"><a href="http://latrucotecadeblogs.blogspot.com"><La Trucoteca de blogs></a></span>

Espero que les haya gustado este truco.
Saludos!!!!

Visto en  Diversas y Variadas Blog

5 comentarios:

  • Juanma™

    Muy útil Javier, ya lo he aplicado a mi blog. ☺ ☺ ☺
    Saludos!

  • La Trucoteca

    Me alegro que te haya servido de ayuda el truco.
    También decirte que pronto publicaré más trucos para dar efectos a las imágenes.
    Saludos!!!!!

  • ♥ Clau Martearena

    El efecto está buenisimo! Lo intente poner unas 5 mil veces, aproximadamente. No hay caso! Hago al pie de la letra lo que decís, es más.. busque en google que puedo hacer y nada, porfa te agradeceria si me ayudaras. Besos y abrazos!

  • albañil

    ya era hora que alguien explicara este efecto de manera clara!! Gracias!!!

  • Ir Arriba