Efecto pushbutton (botón-pulsar)


Un efecto muy ineteresante que se puede aplicar tanto a imágenes que sirvan de enlace como a simples enaces de texto.

El efecto provoca que el enlace parezca pulsado o como si se "hundiera". Pero, para saber de que trata el efecto pushbutton, aquí les dejo una muestra, pasad el mouse por encima del enlace:



Queréis hacerlo, es bastante sencillo:

♠ Para empezar, vamos a Diseño/ Edición de HTML.
♠ Con ayuda de CTRL+F buscamos ]]></b:skin> y antes de este pegamos:

.pushbutton a:hover{
position: relative;
top: 1px;
left: 1px;}

Luego de esto damos click a guardar plantilla.

♠ Ahora cada vez que querramos agregar un enlace con este efecto deberemos de hacerlo del siguiente modo:

<span class="pushbutton"><a href="AQUÍ-ENLACE-A-PÁGINA"><img src="URL-DEL-BOTÓN"></a></span>

Para agregar un enlace con texto y que tenga el efecto botón-pulsar deberemos de borrar <img src="URL-DEL-BOTÓN"> y en su lugar poner el texto.

10 opinaron:

squirrel

Muy bonito efecto; lo aplicaré de ahora en adelante a todos los botones :)

Besos

Responder
Genial

Un efecto muy interesante y también muy sencillo de aplicar.

Saludines :)

Responder
juan carlos

Muy bueno :)

Responder
Jéssica YK

» squirrel: sería una buena opción y se vería muy bueno en tu blog.

» Genial: sí, es en verdad muy sencillo de usar.

» juan carlos: gracias.

S@lu2

Responder
La Trucoteca de Blogs

Hola!!! Muy bueno este truco. Lo pondré en algunas imagenes para dejarlas chulas. Me gusta mucho tu blog, lo pondré en Blogs de Ayuda en mi blog!. Muchos Saludos, Jessica!!!

Responder
Jéssica YK

La Trucoteca de Blogs: muchas gracias por la visita y por incluírme; quedas también agregado a mi Blogroll.

S@lu2

Responder
Smark

muchas gracias por el tutorial lo aplicare a la imagen de mi feed :D

saludos

Responder
Jéssica YK

Smark: sí, me pasé por Mente-blog y vi que lo aplicaste, quedó muy bien :)

S@lu2

Responder
securitylast

en mi blog cuando presiono el boton no pasa nada..pero al lado del mismo si como lo arreglo?? gracias

Responder
Graciela

Tesoro por fin lo encontré :O no sabía como se llamaba, me encanta como queda...besos!!!

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio