Tema: Conseguir este efecto al pasar el mouse sobre un boton (hover)

Hola, bueno quería saber como puedo lograr este efecto:
Link normal:

Link hover:

A mi en este momento me ocupa todo el cuadrado, y quiero lograr ese efecto. También estaría bueno agregarle una "sombra interior". Como se hace.. supongo que necesito usar tanto .CSS como Photoshop.

Saludos,

Puedes hacerlo metiendole al enlace una imagen de fondo al hover mediante el css. Muy sencillo.

Con el Adobe Dreamweaver se hace facilmente.

En la opción insertar imagen -> imagen por sustitución y te sale algo como esto:

Documento sin título

Encontre esto en mi repertorio de snippets, en conceptopixel esta la info.

Debes unir esos dos botones en una sola imagen, la que quieres que este en reposo arriba, y lo que quieres que este en hover, abajo:
http://www.inblogos.com/wp-content/2009/10/paso6.jpg

Ahora guarda esa imagen en png, gif o lo que sea con el nombre, digamos "boton.png".

Este es el codigo CSS si lo quieres poner en tu stylesheet.css (si lo quieres para una web HTML solo envuelve el CSS en la etiqueta <style type="text/css">codigo</style>

Código HTML:

boton { 
    display:block; 
    width:183px; 
    height:40px; 
    text-indent:-9999px; 
} 
.boton a { 
    display:block; 
    width:183px; 
    height:40px; 
    background:transparent url(http://DIRECTORIO/boton.png) no-repeat top left; 
    outline:none; 
} 
.boton a:hover { 
    background-position:0 -40px; 
}

Nota que tienes que sustituir el width por el de tu boton y el height por la altura media del total de tu boton, es decir que si tu boton mide 300 pixeles de ancho y 50 de alto, el width debe ser 300 y el height (en todos debe ser) debe ser 25 (la mitad), nota tambien que en la propiedad:
background-position:0 -40px; debes poner tambien la mitad de la altura, esta propiedad hace que al poner el raton encima, se recorra 40 pixeles hacia arriba mostrando la otra mitad.

Nota tambien que tienes que sustituir el DIRECTORIO por la URI donde se encuentra el boton.

ahora vamos, para llamarlo usa el siguiente parrafo con clase, puede ser un vinculo tambien.

Código HTML:

<p class="boton"><a alt="Titulo Alternativo" title="Titulo" href="http://www.google.com.mx"></a></p>

Y ya tienes tu boton, fuente, un tutorial mio:
Crear un Boton con Efecto Hover usando Photoshop y CSS | Inblogos

Iniciado por crystaldream

Encontre esto en mi repertorio de snippets, en conceptopixel esta la info.

Debes unir esos dos botones en una sola imagen, la que quieres que este en reposo arriba, y lo que quieres que este en hover, abajo:
http://www.inblogos.com/wp-content/2009/10/paso6.jpg

Ahora guarda esa imagen en png, gif o lo que sea con el nombre, digamos "boton.png".

Este es el codigo CSS si lo quieres poner en tu stylesheet.css (si lo quieres para una web HTML solo envuelve el CSS en la etiqueta <style type="text/css">codigo</style>

Código HTML:

boton { 
    display:block; 
    width:183px; 
    height:40px; 
    text-indent:-9999px; 
} 
.boton a { 
    display:block; 
    width:183px; 
    height:40px; 
    background:transparent url(http://DIRECTORIO/boton.png) no-repeat top left; 
    outline:none; 
} 
.boton a:hover { 
    background-position:0 -40px; 
}

Nota que tienes que sustituir el width por el de tu boton y el height por la altura media del total de tu boton, es decir que si tu boton mide 300 pixeles de ancho y 50 de alto, el width debe ser 300 y el height (en todos debe ser) debe ser 25 (la mitad), nota tambien que en la propiedad:
background-position:0 -40px; debes poner tambien la mitad de la altura, esta propiedad hace que al poner el raton encima, se recorra 40 pixeles hacia arriba mostrando la otra mitad.

Nota tambien que tienes que sustituir el DIRECTORIO por la URI donde se encuentra el boton.

ahora vamos, para llamarlo usa el siguiente parrafo con clase, puede ser un vinculo tambien.

Código HTML:

<p class="boton"><a alt="Titulo Alternativo" title="Titulo" href="http://www.google.com.mx"></a></p>

Y ya tienes tu boton, fuente, un tutorial mio:
Crear un Boton con Efecto Hover usando Photoshop y CSS | Inblogos

Muy bueno el tuto Crystal

Increible Crystal, va dedo!

Saludos,

Ahora que lo apliqué el único problema es que cada botón tiene distinto tamaño, entonces no puedo usar el mismo para todos. Voy a tratar de medir el ancho de la nav, dividirlo por las categorias y en ves de que el width de cada boton sea auto, lo estandarizo para todos igual.

Saludos,