28

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>

Entradas Relacionadas:

28 comentarios:


Katherine Gutierrez

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 ^_^

Katherine Gutierrez

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

Azul...

Siempre con ideas geniales

Te dejo bessitosssssss (textrañoooo)

Anónimo

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.

Anónimo

Ismael, lo mismo te deseo.
¡Bendiciones!

Anónimo

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

Anónimo

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>

Anónimo

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

La Nadie

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!

Anónimo

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

Anónimo

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

Anónimo

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...

Antonio Ruiz

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

Anónimo

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

Christian

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!

Anónimo

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

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

Christian

Muchisimas gracias Rosa!
era justo lo que necesitaba!

Anónimo

Christian ¡Me alegro! ;)

Christian

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!

Anónimo

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

Christian

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!

Anónimo

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!

Christian

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!

Smocker

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 :)

Rosa

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...

Smocker

Rosa ya lo he conseguido, muchas gracias :D

Omar

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

Anónimo

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

Publicar un comentario

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.

:) :(( :( :P :D :$ ;) :I :X :O |O :S