Un bloguero Practicando

Efecto pushbutton en las imágenes

Efecto pushbutton en las imágenes

Comparteme :


El efecto pushbutton es el efecto que se le da a un elemento que simula un botón presionándose, en otras palabras, el elemento da la ilusión de tener un hundimiento cuando se hace click sobre él o cuando pasamos el cursor encima.

Ejemplo:

Demostración


El código para este efecto es de lo más sencillo, sólo hay que entrar en Plantilla | Edición de HTML y antes de ]]></b:skin> pegar lo siguiente:
.post img:hover {
position: relative;
top: 1px;
left: 1px;
}

Y listo, así se simple las imágenes de las entradas tendrán este efecto al pasar el cursor sobre ellas.
Si deseas que el efecto pushbutton se aplique a todas las imágenes del blog, entonces pégamos este código en lugar del anterior:
img:hover {
position: relative;
top: 1px;
left: 1px;
}

Si quisieras que el efecto sólo se aplique a las imágenes que tú elijas, entonces omitimos esos códigos y pegamos este:
.pushbutton:hover {
position: relative;
top: 1px;
left: 1px;
}

Y luego cuando quieras que una imagen tenga el efecto pushbutton usas este código:
<img class="pushbutton" src="URL de la imagen" />

Sólo cambia la URL de la imagen y listo. Esa imagen tendrá el efecto pero las demás no.



Comparteme :
Bloguero Tutorial
Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?
Efecto pushbutton en las imágenes.
Comparte

Artículos Relacionados

Tu mensaje sera visible tras la aprobación del administrador