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.
El código para este efecto es de lo más sencillo, sólo hay que entrar en Diseño > 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.
Tantos códigos me han dado mucha sed ¿qué tal una cerveza?
Enlaza este blog
Suscribirse al feed
Suscribirse por e-mail
Agregar en tu iGoogle
Seguir en Twitter
Enviar un correo
¿Dónde estás Superman?
Iconos RSS.PNG)
Música JPZ
44 comentarios:
Excelente Tuto amigo esta bueno
Muy bueno....
Como siempre muy novedoso,
Muchas Gracias...
Wow, es genial.
Ahora que veo la imagen quiziera preguntarte ¿Como haces las imagenes PNG?
UFE-Activo, qué bueno que te ha gustado =)
Descargar en Español, gracias a ti por tu visita.
El Venado, la imagen de ejemplo no está en PNG sino en JPG. Pero cualquiera de las dos las hago en Photoshop.
hola potro, esta muy bueno el efecto, y la imagen tambien.
Saludos!
felizzz navidaddd, re tarde un poco mas y casi te saludo para año nuevo xD jajajaja
muchas gracias por la ayuda que nos brindas siempree
saludoss
Me gusta el botón ese, te quedó muy bueno... Saludos y genial herramienta... Mañana voy a publicar una entrada más didactica en mi blog, jeje, para usar el mover un botón, jaja, un saludo!
Hola POTRO que tal me fascino este truco de verdad es lo mejor
y lo mejor es que voy a crear una web .com, y necesito de mucha gente estas interesado, si estas interesado pues abres el link de mas abajo y lo checas, es un documento de TXT trae mas detalles, vas a ganar una buena lana men, es algo de escribir tu opinion.
Pero espero contar contigo vale
no me falles
Bueno entra aqui y checa mas detalles
http://dl.dropbox.com/u/3254711/Other/Sistema%20de%20Nuevo%20Ingreso%20a%20Web.txt
PepeX, qué bueno que te ha gustado.
Ezequiel, igualmente, que tengas un excelente año nuevo!
Ascesino96, mañana que me doy una vuelta en tu blog para ver cómo quedó.
Alex, al rato lo checo para ver de qué se trata, saludos.
Hola, pase para darte las gracias por todo tu apoyo y conocimientos que me has brindado durante el año, asi como desearte mucha felicidad y mis mejores deseos para el 2010, un fuerte abrazo
Hola DE INTERES,
Muchas gracias por tus palabras. Que tus deseos se vean multiplicados hacia ti y tus seres queridos.
Mucho éxito en el 2010.
Un abrazo!
Potro, me vine hasta acá para desearte que tengas un Feliz Año Nuevo !! Que se cumpla todo lo que desees en este próximo 2010 :)
Del post: no veo el efecto con este "carro viejo" que tengo por PC :( (buaaaaaaaa) No importa, lo hice igual en el blog de prueba, algún día lo veré en otra PC... se la voy a pedir a los Reyes Magos jajajajaja
Besotes !!!
Hola Maria Rosa,
De hecho me sorprende que ese ordenador aun encienda, jajaja. Eres una excelente persona y la labor de tu blog es muy noble, estoy seguro que los Reyes Magos te traerán algo.
Que tengas un excelente año nuevo y que esté lleno de éxitos y bendiciones para ti y tu familia.
Besos!
Eso era Todo
Bien el poTro
eso me funcionara para mis botones de descarga
salud2
unrealmat
En los botones de descarga siempre queda muy bien el efecto.
Saludos!
Hola potro, y que parte de img class="pushbutton" src="URL de la imagen" habría que cambiarle para que ademas del efecto optico de boton, ademas condusca a una descarga ? es decir, que un boton que ya tengo con una imagen (que al darle click va a la dirección de la descarga) tenga este efecto
Hola Juan Carlos Agudelo,
Sería encerrar el código de la imagen con el código del enlace, es decir, así:
<a href="URL del enlace"><img class="pushbutton" src="URL de la imagen" /></a>
Cambia la URL del enlace que es el de la descarga y la URL de la imagen de tu botón.
Saludos.
AH ok, gracias, lo usare pronto para los downloads
potro como se le hace para que solo tenga este efecto en la pagina principal y en las entradas individuales.
Hola cargohe,
Para que tenga el efecto en las entradas individuales y en la página principal usa el primer código.
Saludos.
potro solo quiero el efecto solo en la página principal, en las individuales no, como le hago.Gracias
Hola cargohe,
Pega antes de </head> lo siguiente:
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post img:hover {
position: relative;
top: 1px;
left: 1px;
}
</style>
</b:if>
Con eso el efecto sólo se verá en la página principal.
Saludos.
ok gracias de 10
Padrisimo le quedo bien a mi blog... mil gracias...
Gracias a ti por tu visita ;)
Muchas Gracias Potro!
Por nada bug :)
Hola, Potro! Exclente, como siempre. Gracias! Lo puse en un blog nuevo que estoy armando y me encantó cómo quedó. Le puse el primer código, el que solo es para las entradas.
He visto un efecto similar con los links escritos, que se mueven, como si uno los estuviera presionando. Quisiera saber cómo hacerlo (si es que es tan sencillo como esto que nos enseñaste aquí y no resulta muy complicado).
Es que la plantilla base que estoy usando en ese blog nuevo es una de las clásicas de blogger (la Stretch Denim); aunque ya la he modificado un poco y le he añadido botones de menú arriba y algunas otras cosas más que no tenía (que he tomado de otras plantillas y se las he incrustado acá); y también otras cosas que he tomado de lo que nos enseñas en Ciudad Blogger.
Pero esa plantilla clásica no trae hover en los links y me gustaría que cambiaran de color al pasar sobre ellos (en todo el blog) y, si se puede, que tuvieran el efecto este de push bottom. Pero por mucho que he tratado, no consigo aún ponerle ningún hover. Creo que no lo estoy colocando en el lugar correcto de la plantilla.
¿Podrías orientarme, por favor, si no es mucha molestia?
Te agradezco de antemano toda tu atención.
Muchas gracias.
P.D. Ah, en el post-footer de mi blog, los links sí tienen hover (pero es que yo tomé en bloque ese pedazo entero, de otra plantilla y se lo incrusté acá). Pero en realidad, no sé bien cómo poner, partiendo de cero, un hover en los links. Gracias.
Hola Vicky,
No es ninguna molestia. Puedes ponerlo en la plantilla directamente, sólo pega debajo de:
a img {
border-width: 0;
}
Lo siguiente:
a:hover {
position: relative;
top: 1px;
left: 1px;
}
Con eso los enlaces tendrán el efecto pushbutton, ahí mismo puedes agregarle otros estilos como color, etc.
Saludos.
Mil gracias, Potro! Mejor dicho, un millón de gracias! Eso era justo lo que quería. Puse el código tal como me indicaste y todo resultó perfecto. Además, le agregué también color, como me sugeriste. Gracias de nuevo.
Perfecto! Incluso tu idea de poner este efecto a los enlaces me ha llamado mucho la atención, probaré en este blog ponerlo a ver qué tal se ve aquí.
Un abrazo!
Hola El Potro, te queria consultar, estoy usando el efecto pushbutton en algunas imagenes no en todas, pero tenes idea de porque me funciona en Internet Explorer y en Google Chrome o Firefox no se ve?
Gracias!
Debería de verse en todos los navegadores, incluso esta página que tiene el efecto pushbutton se ve sin problemas en todos los navegadores, por lo cual me haría pensar que debe tratarse de tu plantilla, quizá tenga una condicional para Internet Explorer o Mozilla con el cual interfiere con este efecto.
Saludos.
Exacto, es lo que me llama la atencion.
Me podrias decir como ubicarlo?
http://panoramicadelobservador.blogspot.com
Te mentiría si te digo cuál es la propiedad que lo causa, de condicionales para navegadores sé muy pero muy poco :(
opsss, estoy en problemas!
No del todo, ya encontré el problema.
Resulta que en los estilos del efecto pushbutton tienes esta anotación:
<!-- EFECTO PUSHBUTTON EN IMAGENES A ELECCION -->
Ese es el problema, cuando las anotaciones van antes de ]]></b:skin> no se usan así las anotaciones, sino así:
/* -- EFECTO PUSHBUTTON EN IMAGENES A ELECCION -- */
La anotación que tú pusiste sólo se usa cuando el código va después de ]]></b:skin>
Elimina la anotación o cámbiala por la que te he mencionado y verás que funciona.
Saludos.
Noo!! Increíble!!
Como a veces se hacen las cosas bien y este tipo de tonterías, como la mía, te pueden complicar la historia!
y ustéd Potro lo resolvió con tanto buen ojo!
Yo me volvía loco, fijando el seteo de los navegadores y ya me estaba resignando.
Muchísimas gracias,
Siéntase orgulloso, continuará perteneciendo a mis blogs recomendados.
Un abrazo!
Pareciera que no pero de repente un descuido como ese nos puede volver locos por días sin dar con la respuesta. En fin, qué bueno que ya está resulto tu problema.
Gracias por tenerme como un blog recomendado.
Saludos.
hola gracias me sirvio de mucho tu blog.
yo me estoy haciendo uno y quiero ponerle cosas nuevas .para el que quiera visitarlo (vendo fragancias alternativas por mayor y hice un blog para que la gente conosca las fragancias................muchas graciassss
Hola Natalia Zana,
Qué bueno que te ha sido de utilidad este sitio.
Mucha suerte con tu blog y con tus fragancias!
Saludos.
Wow, mil gracias ésto era justo lo ke andaba buskando, me has sido de gran ayuda hoy y desde el inicio de mi blog.
Un abrazo :)
Qué bueno que has podido encontrar en este sitio temas útiles para ti.
Un abrazo!
Publicar un comentario en la entrada
Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.