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

Tony Speedman · ReTweet este post! #1 (**permalink**) 30-Dec-2009, 02:46

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,

allvipdomains · ReTweet este post! #2 (**permalink**) 30-Dec-2009, 02:58

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

Camilo Sánchez · ReTweet este post! #3 (**permalink**) 30-Dec-2009, 03:00

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

crystaldream · ReTweet este post! #4 (**permalink**) 30-Dec-2009, 03:16

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

Camilo Sánchez · ReTweet este post! #5 (**permalink**) 30-Dec-2009, 03:25

Cita:

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

Tony Speedman · ReTweet este post! #6 (**permalink**) 30-Dec-2009, 04:52

Increible Crystal, va dedo!

Saludos,

Tony Speedman · ReTweet este post! #7 (**permalink**) 01-Jan-2010, 08:57

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,

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Ayuda y opiniones sobre este proyecto	julio cesar	Presume tu Web / Blog	4	20-Dec-2009 03:31
Pasar dominio de 1&1 hacia name.com	etnos	Dominios	1	01-Dec-2009 13:57
¿Como se hace este efecto?	Aldo	Diseño Gráfico	8	08-Nov-2009 18:49
Para los "Capos" de este mundo ¿Cuanto te costo conseguir el éxito que tienes?	Baspi	Off Topic	14	14-Oct-2009 01:57
Nuevo efecto sobre los links en Internedianos	Guillermo	Presume tu Web / Blog	9	08-Sep-2009 23:57

Nombre de Usuario		¿Recordarme?
Contraseña

(0 miembros y 1 visitantes)