Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Imágenes estilo botón pulsado al pasar el cursor

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

Imágenes estilo botón pulsado al pasar el cursor


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.

Carla P. dice...

Millones de gracias por esto. Andaba buscando algo similar y no encontraba nada que pudiese no ser usando un script.

Saludos y gracias.

Jaime Trujillo Escobedo dice...

Carla P, gracias a ti por comentar. Me alegro de que por fin hayas conseguido el efecto que buscabas ;).

Σ=o) Pau dice...

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

Jaime Trujillo Escobedo dice...

¡¡Hola Σ=o) Pau!!

Yo también lo había visto en varios blogs, sobre todo en los enlaces ;).

Gracias a ti por comentar.

¡Abrazotes!

Ascesino96 dice...

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

Jaime Trujillo Escobedo dice...

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!

Ascesino96 dice...

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

Jaime Trujillo Escobedo dice...

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

Arny Joaquìn dice...

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!

Jaime Trujillo Escobedo dice...

¡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!

happycrations dice...

:( :$ no puedoooooo, cuando inserto el codigo en la entrada y lo voy a guardar, me da un error, que seraaaaaaaaaaaa

happycrations dice...

jajaja me equivoque no era eso lo que queria pero gracias por todo :)

Jaime Trujillo Escobedo dice...

¡No te preocupes, Happycrations! Veo que ya lo tienes solucionado ;).

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo