14/6/07

Imágenes tipo botón-pulsar

Podemos aplicar este efecto a cualquier imagen del blog, queda muy bien especialmente con las imágenes que hacen de botón-link o con los iconos de los marcadores sociales, por ejemplo.
El efecto es parecido al que ya expliqué anteriormente para los links, con la diferencia de que este se aplica solamente a las imágenes que queramos.

Tenemos, por ejemplo, un botón de marcador social, en este caso de technorati, al pinchar sobre el nos llevará a su web: http://technorati.com/, podemos hacer que el botón tenga el efecto de "pulsado":

Añadimos este código en el CSS de nuestra plantilla:
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}

El botón de technorati tiene esta estructura:

<a href="http://technorati.com/"><img src="url del botón"></a>

Para darle el efecto de pulsado, hemos de "envolver" su estructura entre:
<span class="pushbutton"><a href="http://technorati.com/"><img src="url del botón"></a></span>

28 comentarios:

  1. Hola Rosa !!!
    Muy buen truco, pero tengo una consulta, donde se debe poner el código en la plantilla, porque he ido probando y no me sale.
    Besotes
    KEY ^_^

    ResponderEliminar
  2. Rosita:
    UPS...Por impaciente te he molestado, mil disculpas, pero ya lo solucioné.
    Muchas Gracias !!!
    Besos
    KEY ^_^

    ResponderEliminar
  3. Siempre con ideas geniales

    Te dejo bessitosssssss (textrañoooo)

    ResponderEliminar
  4. Anónimo12/2/08

    Bueno antes que nada hola ...espero que te encuentres de mil maravillas.
    DESPUES GRACIAS POR TUS EXPLICACIONES.
    He aprendido varios trucos a traves de tus explicaciones .
    Espero algun dia poder brindar lo mismo a otros que han empezado como yo . un abrazo y que sigas re bien . bendiciones para ti.

    ResponderEliminar
  5. Anónimo16/2/08

    Ismael, lo mismo te deseo.
    ¡Bendiciones!

    ResponderEliminar
  6. Anónimo11/5/08

    Hola Rosa, perdón ¿dónde esta el CSS? Tengo desde hace tiempo el botón-link "agenda cultural..." y quiero poner este efecto..

    Saludos y gracias!
    Lucero

    ResponderEliminar
  7. Anónimo11/5/08

    Botella al mar, el CSS de la plantilla es todo lo que está entre <b:skin><![CDATA[/* y ]]></b:skin>

    Para no tener problemas, lo mejor es colocarlo justo antes de ]]></b:skin>

    ResponderEliminar
  8. Anónimo11/5/08

    Eres un sol!!!!
    Quedó perfecto!
    Mil gracias!!!!!
    Lucero

    ResponderEliminar
  9. Hola, Rosa. A los tiempos! xD

    Niña, te tengo una pregunta. Para conseguir el código que emplea Facebook, por ejemplo, para "compartir" el post ¿qué hay qué hacer? Facebook es importante tenerlo en esas redes...

    Un saludo y un gran abrazo desde Medellín!

    ResponderEliminar
  10. Anónimo21/11/08

    Jorge, ufff, no conozco nada de facebook...podrías preguntar a Eulalia, que hasta ha hecho un blog al respecto:
    http://laeulalia-blogdeprobes.blogspot.com/2008/11/pasaba-por-aqu.html

    ResponderEliminar
  11. Anónimo16/12/08

    Hola Rosa,
    Mi pregunta es la siguiente, aunque bien te dire que no tengo ni idea de blog, pero gracias a ti estoy haciendo lo que ves en el blog http://cosas43es.blogspot.com
    Quisiera por favor saber si puedo cambiar el orden de las entradas.
    Gracias por tu ayuda...
    Me encanta tu blog, con el se aprende muchisimo
    gracias de nuevo

    ResponderEliminar
  12. Anónimo16/12/08

    cosas43.es , no hay manera de cambiar el orden de las entradas de forma automática.

    Lo único que puede hacerse es controlar el orden de aparición en el blog mediante su fecha, es decir, si a la entrada que actualmente se ve en primer lugar al acceder a tu blog, le pones (en el editor de entradas) la fecha de una antigua (incluso la primera que publicaste en el blog) pasará a mostrarse en esa fecha, o sea, la última a la vista...

    ResponderEliminar
  13. Mil gracias de nuevo Rosa. El efecto ha quedado genial en mi blog de naturaleza y viajes.

    Besos desde el Sur.

    Antonio
    http://naturalezayviajes.blogspot.com

    ResponderEliminar
  14. Anónimo18/5/09

    Antonio Gracias a ti :D
    ¡Me encanta la imagen del avatar de tu perfil!

    ResponderEliminar
  15. Hola Rosa!
    como puedo colocar este icono arriba de todo para poder crear asi con varios iconos un menu, tipo un boton para inicio, otro para RSS, etc

    muchas gracias!
    y tu blog es mas que excelente!

    ResponderEliminar
  16. Anónimo24/5/09

    Christian Algo como lo que explico en esta entrada, creo que te servirá:

    http://elescaparatederosa.blogspot.com/2009/05/mini-menu.html

    ResponderEliminar
  17. Muchisimas gracias Rosa!
    era justo lo que necesitaba!

    ResponderEliminar
  18. Anónimo26/5/09

    Christian ¡Me alegro! ;)

    ResponderEliminar
  19. hola Rosa!
    te molesto nuevamente
    te cuento que el menu quedo perfecto
    y ahora queria ver si era posible utilizar la imagen de cada icono en 2 colores, es decir, tengo todos los iconos del menu en color blanco y negro y quiero que cuando posiciono el cursor sobre uno de ellos, ademas de hacer el efecto de push que tambien se ponga de color para eso ya tengo las 2 imagenes de cada uno de los iconos de mi menu (1 en blanco y negro y otra en color) pero tenes idea de como deberia hacerlo ? es posible ?

    muchas gracias nuevamente!
    saludos!

    ResponderEliminar
  20. Anónimo26/5/09

    Christian En esta entrada de Vagabundia puedes ver sobre el efecto que dices:

    http://vagabundia.blogspot.com/2008/11/algo-sobre-rollovers.html

    E incluso hacer algo así online:
    http://elescaparatederosa.blogspot.com/2008/03/efecto-rollover-para-tus-imagenes.html

    ResponderEliminar
  21. Genial Rosa!
    muchas gracias!

    aunque todavia no lo he podido implementar en el menu que hice siguiendo tu entrada del "mini menu"

    te dejo la direccion de mi blog para que puedas ver como quedo (el menu lo coloque al pie del blog) y a ver que te parece el diseño!

    www.christianzago.com

    muchas gracias nuevmente por tu asistencia!
    saludos!

    ResponderEliminar
  22. Anónimo26/5/09

    Christian Pues te ha quedado muy bien. :D El menú al estar en colores alegres destaca con el resto del diseño del blog y consigue atraer la atención...¡me gusta eso!

    ResponderEliminar
  23. muchas gracias Rosa! por tomarse el trabajo de mirar mi blog y como te dije antes por tanta ayuda!
    la verdad que gracias a vos, a Gem@, a Vagabundia, a Pizcos, etc.. todo se hace mucho mas facil para que un blog quede lo mas parecido a lo que uno quiere hacer!

    saludos

    pd: y con tu permiso, te seguire consultando!

    ResponderEliminar
  24. Rosa es un código muy fácil de implantar en el blog, pero no se porque no me funciona, puse todo como lo explicas pero no consiguo que funcione el efecto. ¿sabrias decirme a que puede deberse? Este es el blog:

    http://tucentrocomercial.blogspot.com/

    Muchas gracias de antemano, un saludo :)

    ResponderEliminar
  25. Smocker El código CSS está correcto y en el lugar adecuado... no puedo decirte más sin ver un botón o imagen con el efecto incluido... y no he podido ver ninguno...

    ResponderEliminar
  26. Rosa ya lo he conseguido, muchas gracias :D

    ResponderEliminar
  27. La verdad no me explico que trucos que he probado en otros blogs los veo aqui y me sirven la verdad muchas gracias

    ResponderEliminar
  28. Anónimo10/4/10

    Omar Quizá entiendes mejor mi forma de explicarlo... sea lo que sea... me parece genial ;)

    ResponderEliminar

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

Nota: solo los miembros de este blog pueden publicar comentarios.