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 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.
Ciudad Blogger
Excelente Tuto amigo esta bueno
ResponderEliminarMuy bueno....
ResponderEliminarComo siempre muy novedoso,
Muchas Gracias...
Wow, es genial.
ResponderEliminarAhora que veo la imagen quiziera preguntarte ¿Como haces las imagenes PNG?
UFE-Activo, qué bueno que te ha gustado =)
ResponderEliminarDescargar 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.
ResponderEliminarSaludos!
felizzz navidaddd, re tarde un poco mas y casi te saludo para año nuevo xD jajajaja
ResponderEliminarmuchas 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!
ResponderEliminarHola POTRO que tal me fascino este truco de verdad es lo mejor
ResponderEliminary 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.
ResponderEliminarEzequiel, 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
ResponderEliminarHola DE INTERES,
ResponderEliminarMuchas 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 :)
ResponderEliminarDel 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,
ResponderEliminarDe 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
ResponderEliminarBien el poTro
eso me funcionara para mis botones de descarga
salud2
unrealmat
En los botones de descarga siempre queda muy bien el efecto.
ResponderEliminarSaludos!
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
ResponderEliminarHola Juan Carlos Agudelo,
ResponderEliminarSerí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
ResponderEliminarpotro como se le hace para que solo tenga este efecto en la pagina principal y en las entradas individuales.
ResponderEliminarHola cargohe,
ResponderEliminarPara 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
ResponderEliminarHola cargohe,
ResponderEliminarPega 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
ResponderEliminarPadrisimo le quedo bien a mi blog... mil gracias...
ResponderEliminarGracias a ti por tu visita ;)
ResponderEliminarMuchas Gracias Potro!
ResponderEliminarPor nada bug :)
ResponderEliminarHola, 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.
ResponderEliminarHe 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.
ResponderEliminarHola Vicky,
ResponderEliminarNo 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.
ResponderEliminarPerfecto! 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í.
ResponderEliminarUn 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?
ResponderEliminarGracias!
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.
ResponderEliminarSaludos.
Exacto, es lo que me llama la atencion.
ResponderEliminarMe 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 :(
ResponderEliminaropsss, estoy en problemas!
ResponderEliminarNo del todo, ya encontré el problema.
ResponderEliminarResulta 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!!
ResponderEliminarComo 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.
ResponderEliminarGracias por tenerme como un blog recomendado.
Saludos.
hola gracias me sirvio de mucho tu blog.
ResponderEliminaryo 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,
ResponderEliminarQué 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.
ResponderEliminarUn abrazo :)
Qué bueno que has podido encontrar en este sitio temas útiles para ti.
ResponderEliminarUn abrazo!
Hoooola
ResponderEliminarNo pude? crees que sea una incompatibilidad de jQuery y scriptacolous o que sera que no me da?
Gracias
Nop, este "truco" no usa scripts así que no interfiere con los scripts que uses.
ResponderEliminarAl parecer es porque un poco más arriba del código que pusiste tienes estas líneas de comentarios:
<!--fin post recomendados-->
Esas líneas de comentarios sólo se usan así cuando están antes de </head>
Cuando los comentarios se ponen antes de ]]></b:skin> entonces van así:
/* comentario */
Cambia esos comentarios que tienes antes de ]]></b:skin> por la otra forma que te he mencionado.
Saludos.
hoooola espero andes Super, y ya te ayas puesto el tatuaje I love mom, jojo broma, no pasando a temas mas seriO
ResponderEliminars me puedes ayudar a ponerselo a mi imagen de cabecera porfa
Muchas GRACIAS
A ver si esto funciona, busca esta línea:
ResponderEliminar#header img {
Debajo de ella agrega esto:
position: relative;
top: 1px;
left: 1px;
Y del tatuaje...ya veré ;)
Este comentario ha sido eliminado por el autor.
ResponderEliminareste truco me ha ido de maravilla ^^
ResponderEliminarlo eh añadido al menú de mi blog,asi queda mas original jejeje le cambie los valores de left y top para que quedase a mi gusto ^^
muchas gracias =)
facil y útil
puedes ver como me quedó ^^ http://kingdomheartszone.blogspot.com
ah,oye una cosita...y no seria posible que en vez de que se desplace de golpe,se desplace poco a poco?
Quizá con algún script pero por el momento no conozco uno que lo haga, aunque es mejor sin script así la plantilla no se vuelve tan pesada.
ResponderEliminarSaludos!
Hola Potro
ResponderEliminarQuisiera saber como ponerle este efecto a los titulos de las entradas nada mas Gracias
Saludos...
En la mayoría de las plantillas se pone el código debajo de:
ResponderEliminar.post h3 a {
Saludos.
Hola potro, tengo un problemilla. Me gustaria poner este efecto en unas imágenes que están en la barra de los gagets. La imagenes las subí de mi ordenador. Puse la primera parte, para hacer el efecto solo en algunas imágenes, pero no encuentro donde tengo que poner lo de la imagen y la URL. Soy bastante novatilla. Acabo de empezar con esto de los blogs. Se trata del blog de mi cole. Te dejo la dirección por si quieres echar un vistazo:
ResponderEliminarhttp://marzán infantil.blogspot.com
es muy, muy, pero que muy sencillito....
Gracias por todo.
Hola,
ResponderEliminarNecesitarías poner la imagen no dentro del gadget de imagen sino en el gadget HTML/Javascript.
Es más o menos igual, entra en Diseño > Elementos de la página > Añadir gadget > HTML/Javascript.
Ahí pega el último código que se menciona en la entrada, donde dice URL de la imagen deberás poner la dirección Web de la imagen que tienes.
Para saber la URL de esas imágenes que ya subiste sólo dale click con el botón derecho y selecciona una opción que diga algo como "Copiar URL de la imagen".
Saludos.
Buenas! he estado intentando agregar este efecto a los botones de suscripcion de mi pagina pero no consigo que salga el efecto.
ResponderEliminar¿Podrias echarme un cable?
gracias!
http://cineconclick.blogspot.com/
Hola moenone,
ResponderEliminarNecesitaría que tengas puesto todo el código que se menciona para poder ver dónde puede estar la falla.
Ok, ya lo he metido.
ResponderEliminarPorcierto, ¿se podria hacer que los botones se adaptaran al tamaño de la pagina? es decir que cuando aumenente el zoom en mi explorador los botones lo hagan tambien.
gracias!
Lo que sucede es que cuando has puesto el primer código has eliminado por error el cierre del código que estaba arriba de él y eso ha hecho que no funcione.
ResponderEliminarLo tienes de esta manera:
#tabsF a:hover span {
background-position:100% -42px;
.pushbutton:hover {
position: relative;
top: 1px;
left: 1px;
}
Si te fijas eso que está en negrita le has quitado la llave de cierre }
Es necesario que no elimines nada y que todo esté colocado de forma correcta.
Debe quedar así:
#tabsF a:hover span {
background-position:100% -42px;
}
.pushbutton:hover {
position: relative;
top: 1px;
left: 1px;
}
Genial potro!! muchisimas gracias, ademas de paso me as resuelto otro problemilla
ResponderEliminarPrecioso efecto Potro como siempre eh, nosotros lo aplicamos y le cambiamos el efecto de posición lo alineamos a right en vez de left y le aumentamos a 5 px cada uno es decir el top y el right y ha quedado excelente, lo puedes ver en nuestro blog www.exajutiapa.blogspot.com en las latas de soda para redes sociales jejeje, saludos desde Jutiapa, Guatemala.
ResponderEliminarHa quedad increíble :)
ResponderEliminarGracias Potro, saludos como siempre, una pregunta más fijate que ultimamente tenemos problemas para guardar cualquier gadget con Google Chrome, al inicio no tenia problemas y despues vimos que no nos funcionaba el boton de guardar, solo ese no s da problema, es decir queremos modificar algo en nuestros widjets si podemos modificarlo pero no podemos guardarlo, solo con IE, ya desinstalamos Chrome y continua el problema creo que es problema con Java ya que esos botones funcionan con Java creo, a lo mejor sepas de algo te lo agradecería.
ResponderEliminarPD. Este problema nos lo dió ultimamente Chrome al inicio no.
Parece ser un problema regular pues últimamente han sido varios usuarios los que han comentado el mismo conflicto que mencionas. Es probable que sea un problema tanto de Chrome como de alguna compatibilidad de ese navegador con Blogger. Si es así entonces no queda más que esperar a que alguno de ellos dos solucione el problema.
ResponderEliminarBueno pues ni modo a esperar se ha dicho jejejeje, gracias como siempre Potro y te cuento que mejor quitamos el efecto pushbuttom porque nos causo conflicto al hacer clic sobre ellos no nos redireccionaba a donde queríamos, si veiamos el efecto pero no hacia la funcion que queríamos, no se a que se deba.
ResponderEliminarpotroo no entiendo porque no me funciona lo puse en una plantilla y me funciono de maravilla pero en esta no http://dagamusic2.blogspot.com/ me podrias decir que pasa porfavor
ResponderEliminarotra pregunta potro ahi en este mismo blog http://dagamusic2.blogspot.com/
ResponderEliminarabajo del menu tengo un gaget con unas imagnes en movimento estilo marquee veo que le puedo poner un background: negro pero no puedo poner una imagenen sabes de alguna forma que pueda?
No veo que hayas puesto los códigos en esa plantilla.
ResponderEliminarPara lo otro encierra el código que quieres dentro de <div style="background:url(URL de la imagen);"> y </div>
si man asi lo tengo
ResponderEliminar.pushbutton:hover {
position: relative;
top: 1px;
left: 1px;
}
]]>
no me funciona nada
y muchas gracias por lo del background lo intentare ^^
Debes quitar la línea de arriba que pusiste:
ResponderEliminar<!-- Fin Paginación -->
Esas sólo se usan si es algo que está dentro de <body> o antes de </head> pero no antes de los estilos, de lo contrario los inhabilita.
muchas gracias todo me funciono perfecto!!! ^^
ResponderEliminarBuenas Potro, queria saber si escogiendo la opcion de que solo algunas fotos agan el efecto, se podria poner un sonido para que suene al pasar el cursor.
ResponderEliminarGracias y un saludo.
Hay una entrada de Vagabundia donde hablan sobre el tema de los sonidos en los enlaces, no lo he probado pero quizá te sirva:
ResponderEliminarhttp://vagabundia.blogspot.com/2011/05/socorro-sonidos-en-cualquier-parte.html
Perfecto el efecto.. pero no me funciona *CRY*
ResponderEliminareste es mi codigo :
https://docs.google.com/document/pub?id=1o2nRXL5bWvmmBQCBHzj-gI81E6HzX_827-hdh6y18CE
y mi blog es http://espacio846.blogspot.com/
no se por que cheque mil veces el codigo
Hola bryan846,
ResponderEliminarLo que pasa es que un poco arriba de ese código tienes un código sin la llave de cierre, eso ha hecho que todo lo que haya debajo de ese error no funcione:
.blog-author-comment p {
margin:0 0 .75em;
padding:5px 10px;
border-bottom: 1px solid #696969;
border-top: 2px double #CDC9C9;
border-left: 1px dotted #ccc;
border-right: 1px dotted #ccc;
background:#CDC9C9;
.CommentIndex{
float:right;
position:relative;top:25px;left:3px;
margin-left:-200px;
font: italic bold 30pt 'Century Gothic','Trebuchet MS';
color:red;
opacity:0.3;
-moz-opacity:0.3;
filter:alpha(Opacity=30);
}
ya lo corregi, funciona perfecto, gracias otra vez
ResponderEliminarConsulta!... yo le tengo en "leer mas" una imagen y a esa imagen me gustaria darle este efecto, intente pero no pude... ayuda porfa!!
ResponderEliminarhttp://vivoyenllamas.blogspot.com/ mi blog para que le heches una miradita! :D
ResponderEliminarPues igual, sólo es buscar el código de la imagen y meter ahí la clase que le da el efecto:
ResponderEliminar<img class="pushbutton" src='http://www.fileden.com/files/2011/7/25/3172693//Logo 2.0.JPG'/>
http://maxima-imusic.blogspot.com/
ResponderEliminarsii!!! queda genial!!
ResponderEliminares horrible tener las imagenes super estaticas...
gracias!!!!!!!
Gracias a ti por tu visita!
ResponderEliminarHola Potro, debo confesar que esta vez me enrede con la opción de poner las imagenes estilo botón. Me queda claro hasta el punto que debo modificar la plantilla usando el penúltimo código, que me va a permitir elegir la imagen para darle el efecto. Pero el último código se pega en la edición html de la plantilla??
ResponderEliminarEn mi blog (página inicio) tenía un botón que llevaba a otro blog, pero dejó de funcionar y lo eliminé. Al querer aplicar la opción de pushbutton a un gadget en el diseño ¿cuál debo seleccionar? ¿gadget html/java o el gadget imagen?...me enredé con las opciones...pero sólo quiero crear un botón en la página principal como enlace a otra web. Saludos.
Hola Sandra. El último código va donde tengas tu imagen y puedas ver su código, ya sea una entrada, o un gadget HTML/Javascript.
EliminarSaludos.
Hola Potro, tengo una duda,
ResponderEliminar¿No se podría aplicar este mismo efecto, pero al hacer click en la imagen?
No se apreciaría, porque inmediatamente se abre el enlace, es por eso que se pone al pasar el cursor.
EliminarAhí en la entrada se menciona cómo aplicarlo sólo a los elementos que tú elijas.
ResponderEliminarcomo puedo hacer para utilizar este codigo:
ResponderEliminar* img class="pushbutton" src="URL de la imagen" *
pero en una imagen incluida como gadget?
gracias.
Así:
Eliminar<img class="pushbutton" expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
No encuentro el codigo con control F ]]> en el nuevo html de blogger, me puedes echar una mano?. No se en que pestaña buscar. Gracias
EliminarGracias por el post, Potro. Tengo una duda. Les he aplicado el efecto a todas las imágenes de los mensajes a la vez pero hay una a la que se lo quiero quitar. ¿Cómo se haría? La otra opción es solo ponerle el efecto a las demás una por una pero es que son más de 130 así que, de momento, lo descarto...
EliminarDa click en la flechita que está junto a <b:skin>...</b:skin> ahí lo encontrarás.
EliminarHola Asier Ruiz, si quieres que una imagen no lo tenga pon estos estilos:
Eliminar.nopushbutton:hover {
position: relative;
top: 0 !important;
left: 0! important;
}
Y luego cuando quieras que una imagen NO tenga el efecto pushbutton usas este código:
<img class="nopushbutton" src="URL de la imagen" />
Muchísimas gracias por responder, Potro. Escribí hará meses sin esperanza de que respondieras porque sabía que andabas sin tiempo para responder a los mensajes del blog. Era posiblemente la última cosa del blog que no estaba como yo quería. No sabes cuánto te agradezco tu ayuda. Casi todas las mejoras que hice en mi blog las saqué de aquí. ¡Eres el mejor!
EliminarGracias Asier, me da gusto que hayas resuelto el último retoque de tu blog. Siento haber demorado tanto, pero ya sabes lo que dicen, más vale tarde que nunca :)
EliminarHola esta muy bueno este efecto pero desde que lo puse los botones de ir arriba e ir abajo cuando les pao el mouse por encima se desaparecen y aparecen del otro lado de la pantalla y ya le puse eso de excluir a la imagen pero ahora reaparecen del otro lado pero arriba ayudame por favor este es mi blog: http://foufouatelier.blogspot.com.ar/
ResponderEliminarHola, aplícalo sólo a las imágenes del post y no a todas las imágenes del blog.
Eliminarmuchas gracias por responder pero lo hice y sigue igual
EliminarBueno, según veo en tu código fuente el problema no es lo que has aplicado de esta entrada, sino de los estilos que le aplicaste a tus botones. A ellos les añadiste la clase nopushbutton y si miras los estilos al pasar el cursor (.nopushbutton:hover) verás que ahí has declarado que el top sea 0 y que en lugar de right sea left.
EliminarMuchas gracias ahi lo acomode pero de otra forma, le borré el top:0 y le puse right en ves de left y tambien en position le puse fixed
EliminarGracias, excelente ayuda.
ResponderEliminar