Añadiendo unas simples líneas de CSS podemos conseguir innumerables efectos en las imágenes. En esta entrada aprenderemos a utilizar un efecto que quizás hayas visto ya en algún sitio web.
Se trata de hacer que la imagen simule un botón, de manera que al pasar el cursor por encima, se "aplaste" o "presione", lo que suele ser de mucha utilidad con las imágenes que actúan como enlace.
Pasa el cursor por el siguiente botón (imagen):
Diseño>Edición de HTML>expandimos artilugios
Busca la etiqueta ]]></b:skin> y añade este bloque de CSS encima:
.blbtnp:hover {
cursor: pointer;
cursor: hand;
position: relative;
left: 1px;
top: 1px;
border: none;
}
Seguidamente guarda la plantilla.
Dirígete a una entrada cualquiera para probar la "imagen botón".
Inserta el siguiente código:
<a href="URL DE LA PAGINA"><img class="blbtnp" src="URL DE LA IMAGEN"></a>
Reemplaza URL DE LA PAGINA por la dirección web a la que conducirá el botón, así como URL DE LA IMAGEN por la dirección del icono [+].
En caso de querer tener una imagen sin enlace, utiliza lo siguiente:
<img class="blbtnp" src="URL DE LA IMAGEN">
Si te fijas, en ambos casos estamos otorgando al código el atributo class (clase), el cual contiene el nombre "blbtnp".
Al saber esto, aplicar el efecto a cualquier otra cosa será pan comido ya que únicamente necesitarás insertar el atributo class en el código.
Podemos aplicarlo en un párrafo como este. Pasa el cursor por encima de esta u otra frase y entenderás rápidamente de lo que estoy hablando. Es un buen truco que puede utilizarse tanto en imágenes como enlaces, pasando por texto o frases.
En caso de quererlo mostrar con texto...
Sigue los mismos pasos citados anteriormente pero en lugar de utilizar el código del icono o la imagen, hazlo con las etiquetas <span> y </span> siguiendo esta estructura:
<span class="blbtnp">CONTENIDO DEL PÁRRAFO</span>
Para terminar, explicaré la forma de añadir el truco a todas las imágenes del blog...
Diseño>Edición de HTML>expandimos artilugios
Busca la etiqueta ]]></b:skin> y añade esto encima:
.post img:hover{
cursor: pointer;
cursor: hand;
position: relative;
left: 1px;
top: 1px;
border: none;
}
Guarda la plantilla y habrás terminado.
¿Problemas al comentar? Utiliza 
Millones de gracias por esto. Andaba buscando algo similar y no encontraba nada que pudiese no ser usando un script.
Saludos y gracias.
Carla P, gracias a ti por comentar. Me alegro de que por fin hayas conseguido el efecto que buscabas ;).
Hola Jaime, habia visto el truco pero no la explicación :) muchas gracias por la información y por ser tan claro.
Un abrazo ronroneado ^_^
¡¡Hola Σ=o) Pau!!
Yo también lo había visto en varios blogs, sobre todo en los enlaces ;).
Gracias a ti por comentar.
¡Abrazotes!
hola Jaime, muy buen post ;)
Te cuento que en mi blog estoy haciendo un sorteo de un dominio .com Si quieres puedes participar ;)
Espero que andes bien ;) Un saludo
Hola Ascesino96! Agradezco mucho el que me hayas invitado a participar en tu sorteo pero debo decirte que aún no he pensado en obtener un dominio propio para El Balcón.
Supongo que lo haré más adelante :D.
¡Mucha suerte!
Respeto tu desición ;)
Espero que algún día te decidas a tenerlo ;)
Y que ese día se te presente la posibilidad de tenerlo gratis como yo lo ofresco ahoora ;)
Muchas gracias, Ascesino96. Posiblemente dentro de unos años lo configure.
Ojalá se me presente ese día, un regalo como el que me ofreciste tú.
Hola buen Jaime! Espero te acuerdes de mi, yo de nuevo por aquì saludando.
Bonito truco el de hoy, y con la sencillez con que tù lo presentas, pues hay que probarlo hoy mismo.
Te enviè un correo electrònico, con una consulta tècnica, espero lo hayas recibido y me puedas responder, lo agradecerè infinitamente.
Un abrazo y hasta pronto!
¡Hola Arny Joaquìn!
¿Cómo no voy a acordarme de tí?
Me alegra que te haya gustado el truco. Ahora mismo reviso el correo ;).
¡Abrazos!
:( :$ no puedoooooo, cuando inserto el codigo en la entrada y lo voy a guardar, me da un error, que seraaaaaaaaaaaa
jajaja me equivoque no era eso lo que queria pero gracias por todo :)
¡No te preocupes, Happycrations! Veo que ya lo tienes solucionado ;).