1 de noviembre de 2009

Botón con efecto visual de pulsado

Aunque haya ocultado la Navbar, y en agradecimiento a que Blogger es el servidor , que gratuitamente, me permite difundir mis blogs, he añadido un botón con acceso directo a Blogger.
 
Para que el botón parezca que se pulsa al pasar el ratón por encima, hay que localizar con la ayuda de Control – F, la etiqueta ]]></b:skin>, y justo antes incluir el siguiente código:
<!— DEFINICION VARIABLES PARA EFECTO BOTON PULSADO -->
.pushbutton a:hover{
position: relative;
top: 2px;
left: 2px;}

Si queremos que se note más o menos cambiaremos el número de pixeles en las líneas top y left.
Ahora cada vez que queramos agregar un enlace con este efecto deberemos de hacerlo del siguiente modo:

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

Para ver el ejemplo, pasa el ratón sobre el botón con el logo de Blogger en la Sidebar derecha.  También he usado este mismo efecto en las imágenes con las que he sustituido el texto de entradas anterior y siguiente.

Entrada anterior Entrada siguiente Página Principal
Related Posts Plugin for WordPress, Blogger...