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

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