Efecto de "pulsar botón" en las imágenes

Mirando por Ciudad Blogger me he encontrado con este tutorial para establecer el efecto de "pulsar botón". El "push button" es el efecto de tener un hundimiento cuando se pasa el cursor por encima o se le da clic a una imagen.

Para hacer este efecto entra a "Diseño", "Edición de HTML" y, sin expandir artilugios, antes de
]]></b:skin> pegas el siguiente código:


.post img:hover {

position: relative;

top: 1px;

left: 1px;

}

Una vez hecho eso, las imágenes de las entradas tendrán este efecto.
Si deseas que el efecto se aplique a todas las imágenes del blog, pega este código en vez del anterior (en el mismo lugar):


img:hover {

position: relative;

top: 1px;

left: 1px;

}

Si quieres que sólo se aplique a las imágenes de la página principal sustituye el código anterior por este:


<b:if cond='data:blog.pageType != "item"'>

<style type='text/css'>

.post img:hover {

position: relative;

top: 1px;

left: 1px;

}

</style>

</b:if>

Si quieres que sólo se le aplique a unas ciertas imágenes (las que tu quieras), pegamos este código en lugar del anterior:


.pushbutton:hover {

position: relative;

top: 1px;

left: 1px;

}

Cuando quieras que una imagen tenga el efecto usa este código:


<img class="pushbutton" src="dirección-de-la-imagen" />

Cambia el texto "dirección-de-la-imagen" por la dirección donde esté la imagen que quieres poner y listo.